"图片小轮换

约定不等于承诺〃 2022-08-24 05:18 146阅读 0赞

图片轮换，网页上很常见的效果，简单的模仿一下   先写个滤镜效果的。（IE  Only）

简单说一下滤镜切换

obj.filters.revealTrans.Transition=Math.floor(Math.random()\*23)  //使用滤镜，先要把图片设置滤镜属性

obj.filters.revealTrans.apply();                                                           // 首先加载滤镜  
obj.filters.revealTrans.play();                                                             // 运行滤镜

效果    值  
盒状收缩   0  
盒状展开   1  
圆形收缩   2  
圆形展开   3  
向上擦除   4  
向下擦除   5  
向左擦除   6  
向右擦除   7  
垂直百页窗   8  
水平百页窗   9  
横向棋盘式   10  
纵向棋盘式   11  
溶解    12  
左右向中部收缩  13  
中部向左右展开  14  
上下向中部收缩  15  
中部向上下展开  16  
阶梯状向左下展开 17  
阶梯状向左上展开 18  
阶梯状向右下展开 19  
阶梯状向右上展开 20  
随机水平线   21  
随机垂直线   22  
随机    23

另外说一下 setTimeout的用法

setTimeout (表达式,延时时间)  
setTimeout  在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次

有2中写法

setTimeout("test()",1000);  
     setTimeout(test,1000);         //没引号,没括号

setTimeout如何传递参数。。。

可以写成 setTimeout(function()\{ss(can)\},1000)                             //我比较喜欢这中

setTImeout("ss("+can+")",100)

同样的 在封装的时候  要用到this也可以这么写

var self = this

setTimeout(function()\{self.ss(can)\},1000)

1.  <style type="text/css">  
    .img\{ width:328px !important;width:330px; height:240px; border:1px solid \#666666; border-bottom:none\}  
    .bottom\{ height:31px; width:328px !important;width:330px; border:1px solid \#666666; border-top:none; background-image: url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174251431.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174251431.t.gif]) \}  
    .information\{ height:31px; width:220px; float:left; font-size:14px; text-align:center; vertical-align:middle; line-height:31px;\}  
    .div1\{ width:13px; height:19px; overflow:hidden; background-image:url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174359116.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174359116.t.gif]); float:left; margin-left:25px; margin-top:5px; text-align:center; cursor:pointer\}  
    .div2\{ width:13px; height:19px; overflow:hidden; background-image:url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174510802.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174510802.t.gif]); float:left; margin-left:14px; margin-top:5px; text-align:center;cursor:pointer\}  
    .div3\{ width:13px; height:19px; overflow:hidden; background-image:url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174510802.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174510802.t.gif]); float:left; margin-left:14px; margin-top:5px; text-align:center;cursor:pointer\}  
    </style>
2.  <body>  
    <div id="ss"></div>  
    </body>  
    <script>  
    function ImgSwitch(id,data,text)\{  
    this.obj   = document.getElementById(id)             //父元素  
    this.data = data                                     //图片数据源  
    this.i = 0                                          //记录现在是哪张图片  
    this.img = ""                                        //记录img元素  
    this.div = new Array()                              //存放3个显示数字的div  
    this.timer = ""                                      //记录那个定时器的  
    this.text  = text  
    this.j = 0  
    this.textdiv = ""  
    \}
3.  ImgSwitch.prototype.Framework=function()\{  
    var self = this  
    var divimg = document.createElement("div")  
        divimg.className = "img"  
     this.obj.appendChild(divimg)  
    var img = document.createElement("img")  
        this.img = img  
        img.style.filter = "revealTrans()";  
     img.src = this.data\[0\]  
     divimg.appendChild(img)    
    var divbottom = document.createElement("div")   
        divbottom.className = "bottom"  
     this.obj.appendChild(divbottom)  
    var divinformation = document.createElement("div")  
     divinformation.className = "information"  
     divinformation.innerHTML = this.text\[0\]  
     this.textdiv = divinformation  
     divbottom.appendChild(divinformation)  
    var div1 =  document.createElement("div")  
        div1.className = "div1"  
     div1.innerHTML = 1  
     div1.οnclick=function()\{self.Change(0)\}  
     this.div.push(div1)  
        divbottom.appendChild(div1)  
    var div2 =  document.createElement("div")  
        div2.className = "div2"  
     div2.innerHTML = 2  
     div2.οnclick=function()\{self.Change(1)\}  
     this.div.push(div2)  
        divbottom.appendChild(div2)  
    var div3 =  document.createElement("div")  
        div3.className = "div3"  
        div3.innerHTML = 3  
     div3.οnclick=function()\{self.Change(2)\}  
     this.div.push(div3)  
     divbottom.appendChild(div3)    
        this.timer=setTimeout(function()\{self.Switch()\},3000)   
    \}
4.  ImgSwitch.prototype.Switch=function()\{  
    var self = this  
        this.i++  
     this.j++  
     if(this.i==this.data.length) \{this.i=0;this.j=0\}  
     this.img.filters.revealTrans.Transition=Math.floor(Math.random()\*23)  
     this.img.filters.revealTrans.apply();  
        this.img.filters.revealTrans.play();  
     this.img.src = this.data\[this.i\]  
     for(var j=0;j<this.div.length;j++)  
     \{this.div\[j\].style.backgroundImage="url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174510802.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174510802.t.gif])"\}  
     this.textdiv.innerHTML = this.text\[this.j\]  
      this.div\[this.i\].style.backgroundImage="url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174359116.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174359116.t.gif])"  
     this.timer=setTimeout(function()\{self.Switch()\},4000)  
    \}
5.  ImgSwitch.prototype.Change=function(num)\{  
    var self = this  
        clearTimeout(this.timer)  
     for(var j=0;j<this.div.length;j++)  
     \{this.div\[j\].style.backgroundImage="url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174510802.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174510802.t.gif])"\}  
      this.div\[num\].style.backgroundImage="url([http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174359116.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174359116.t.gif])"  
      this.textdiv.innerHTML=this.text\[num\]  
     this.i=num;this.j=num  
        this.img.filters.revealTrans.Transition=23  
     this.img.filters.revealTrans.apply();  
        this.img.filters.revealTrans.play();  
     this.img.src = this.data\[this.i\]  
     this.timer=setTimeout(function()\{self.Switch()\},3000)  
    \}  
    var text=\["关之琳穿花裙高调亮相美女老了","《嫂嫂19岁》垃圾片,抵制韩片","《剑蝶》迟到引不满,笨蛋呀"\]  
    var data = \["[http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/173755501.p.jpg","http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174009419.p.jpg","http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/174203244.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081212_173755501.p.jpg_http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174009419.p.jpg_http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174203244.p.jpg]"\]  
    var oo   = new ImgSwitch("ss",data,text)  
        oo.Framework()  
    </script>

上面是一个ie only的  唉  。。。不兼容呀

下面这个是从无缝滚动发展出来的。开始觉得比较简单

结果发现 跟上面的那个完全不是一个等级的。。。。

1.  <style type="text/css">
2.  .wai\{height:168px;width:408px; overflow:hidden\}
3.  .showdiv\{ height:20px; width:18px; border:0px;position:relative; background-color:\#FF7300;  float:left; color:\#FFFFFF; line-height:20px; text-align:center; vertical-align:middle; font-size:14px; font-weight:bold; cursor:pointer\}
4.  .div\{ height:18px; width:18px; border:1px solid \#FF7300;top:-366px;position:relative; background-color:\#FFFFFF; float:left;line-height:18px; text-align:center; vertical-align:middle; font-size:12px; color:\#FF7300; cursor:pointer\}
5.  .imgdiv\{height:168px;width:408px;\}
6.  
7.  </style>
8.  <body><div id="ss"></div><br><br><br><div id="sss"></div></body>
9.  <script>
10. function Img(id,data,height,amount)\{
11. this.obj  = document.getElementById(id)
12. this.data = data
13. this.Location = \["300px","310px","320px"\]
14. this.timer = ""
15. this.div =""
16. this.step = 0
17. this.i = 0
18. this.j = 0                                   //在哪张图片上 
19. this.Isdirection = "on"                    //控制方向 
20. this.Isonclick = false
21. this.num = 1
22. this.amount = amount
23. this.height = height
24. \}
25. 
26. Img.prototype.Create=function()\{
27. var self = this 
28. var div  = document.createElement("div")
29.     div.className = "wai"
30.     this.div = div
31.     this.obj.appendChild(div)
32. 
33. for( var i= 0; i<this.amount;i++)
34.    \{
35.     var imgdiv = document.createElement("div")
36.         imgdiv.className = "imgdiv"
37.         div.appendChild(imgdiv)
38.     var img = document.createElement("img")
39.         img.src = this.data\[i\];   
40.         imgdiv.appendChild(img) 
41.    \}    
42.     
43. 
44. for( var i= 0; i<this.data.length; i++)
45.    \{
46.     var div1 =document.createElement("div")
47.         div1.className = "div";div1.style.top = "-366px"
48.         if(i==0)div1.className = "showdiv"
49.         div1.innerHTML = i+1
50.         div1.style.left = this.Location\[i\];
51.         (function(i)\{div1.οnclick=function()\{self.Judge(self.j,i)\}\})(i);
52.         div.appendChild(div1)
53.    \}
54.   this.timer = setTimeout(function()\{self.Move()\},2000)
55. \}
56. 
57. Img.prototype.Move=function()\{
58. var  self = this
59. var  div  = this.div.getElementsByTagName("div")
60. this.step = this.Isdirection == "on"?(Math.floor(this.height/4))\*this.num:-(Math.floor(this.height/4))\*this.num
61. 
62. var    yu = this.height%4 
63.    if(this.i!=4)
64.           \{   
65.               this.i++
66.               this.div.scrollTop = this.div.scrollTop + this.step
67.               for(var i = 3 ; i<6; i++)
68.                  \{ div\[i\].style.top = parseInt(div\[i\].style.top) + this.step \}
69.               this.timer = setTimeout(function()\{self.Move()\},1)     
70.           \}
71.     else      
72.           \{ 
73.               this.i=0;
74.               if(this.Isdirection == "on")\{ this.j++;if(this.num!=1)this.j++;  yu = Math.abs(yu)\}
75.               if(this.Isdirection == "down")\{ this.j--;if(this.num!=1)this.j--;yu =-Math.abs(yu)\}
76.               if(this.j==2) this.Isdirection = "down"
77.               if(this.j==0) this.Isdirection = "on"
78.               this.div.scrollTop = this.div.scrollTop + yu
79.               for(var i = 3 ; i<6; i++)
80.                  \{ div\[i\].style.top = parseInt(div\[i\].style.top) + yu ;div\[i\].className = "div";  \}
81.               div\[this.j+3\].className = "showdiv"
82.               this.num=1
83.               this.timer = setTimeout(function()\{self.Move()\},2000)
84.           \}
85. \}
86. 
87. Img.prototype.Judge=function(start,end)\{
88. var self = this
89. clearTimeout(this.timer)
90. if(end == start)\{ this.timer = setTimeout(function()\{self.Move()\},2000);return\}
91. this.Isdirection=(end > start)?"on":"down"
92. this.Isonclick = true
93. this.num = Math.abs(end-start)
94. this.Move()
95. \}
96. 
97. var data = \["http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093508656.p.jpg","http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093747234.p.jpg","http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093922593.p.gif"\]
98. window.οnlοad=function()
99. \{ var oo   = new Img("ss",data,168,3)
100.     oo.Create()
101.     \}
102. </script>

[http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174251431.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174251431.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174359116.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174359116.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174510802.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174510802.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081212_173755501.p.jpg_http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174009419.p.jpg_http_album.hi.csdn.net_app_uploads_wtcsy_20081212_174203244.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081212/173755501.p.jpg","http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174009419.p.jpg","http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174203244.p.jpg