位置:海鸟网 > IT > JavaScript >

javascript图片切换

闲来无事,练习

window.onload=function(){

                new imgSwitch("imgContainer",{Type:15,Width:874,Height:211,Pause:3000,Speed:"fast",Auto:true,Navigate:"picture",PicturePosition:"right"})   

    }

  参数说明:

     Type:图片切换的方式,目前有0-17,

0: 随机切换

1: 4格纵向百叶窗

2: 16格横向百叶窗

3: 由里至外逐渐放大

4: 中间向左右两边逐渐放大

5: 中间向上下两边逐渐放大

6: 由上至下落幕

7: 由左至右

8: 由左上至右下

9: 由右下至左上

10: 8格纵向百叶窗

11: 8格纵向百叶窗2

12:8格万花筒

13: 24格万花筒

14: 4格滑行左上至右下

15: 4格滑行左上至右下

16: 4格滑行落幕

17: 4格滑行延伸。

     Width:图片的宽度(这个有点小bug,回头改正,修改长高时style.

<div style="width: 235px; height: 177px; background-image: url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E4%BB%A3%E7%A0%81/imgSwitch/images/3.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; clip: rect(0px 235px 177px 0px); background-position: 0px -177px; background-repeat: initial initial; "></div>

  主要的属性有:

目前测过的浏览器支持:

IE(6,7,8,9) firfox chrome safari