JS实现淘宝幻灯片效果
淘宝幻灯片效果：能自动播放，鼠标指向或者点击数字按钮就能切换图片。
实现思路：
1、for循环给数字按钮加上点击事件。
2.for循环先把按钮的样式清空，再把当前样式设置样式。
3、给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应，用运动框架把大图的UL每次移动-150px，因为图片高度是150px。如果移动到第n张图片就是-150*n。
4、定义变量now，用来自动播放用的。把当前图片赋值给now now=this.index。
5、定义自动播放函数。now++ 下一张，if判断，到最后一张图片的时候就把now设置为0，就是第一张。 if(now==aBtn.length)
6、定义定时器，每2秒就调用一次自动播放函数。
7、鼠标指向图片时就清除定时器。
8、鼠标离开图片时就开启定时器。
View Code
1 <script> 2 window.onload=function() 3 { 4 var oDiv=document.getElementById('play'); 5 var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); 6 var oUl=oDiv.getElementsByTagName('ul')[0]; 7 var now=0; 8 9 for(var i=0;i<aBtn.length;i++) 10 { 11 aBtn[i].index=i; 12 aBtn[i].onmouseover=function() 13 { 14 now=this.index; //当前值赋给now 15 tab(); 16 } 17 }; 18 19 function tab() 20 { 21 for(var i=0;i<aBtn.length;i++) 22 { 23 aBtn[i].className=''; //把所有按钮的样式清空 24 }; 25 aBtn[now].className='active'; //当前按钮样式设置 26 startMove(oUl,{top:-150*now}); //用运动框架把UL的TOP设置为当前个数*-150，第三张图片就是2*-150 27 }; 28 29 function next() 30 { 31 now++; //切换图片 32 if(now==aBtn.length) //如果到了最后一张图片 33 { 34 now=0; // 把图片拉回第一张 35 } 36 tab(); //把图片拉回第一张后继续运动 37 }; 38 39 var timer=setInterval(next,2000); //2秒自动切换图片 40 41 oDiv.onmouseover=function() 42 { 43 clearInterval(timer); //清除定时器 44 }; 45 46 oDiv.onmouseout=function() 47 { 48 timer=setInterval(next,2000); //开启定时器 49 }; 50 }; 51 </script>
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂</title> 6 <link href="css.css" rel="stylesheet" type="text/css" /> 7 <script src="baseCommon.js"></script> 8 <script> 9 window.onload=function() 10 { 11 var oDiv=document.getElementById('play'); 12 var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); 13 var oUl=oDiv.getElementsByTagName('ul')[0]; 14 var now=0; 15 16 for(var i=0;i<aBtn.length;i++) 17 { 18 aBtn[i].index=i; 19 aBtn[i].onmouseover=function() 20 { 21 now=this.index; //当前值赋给now 22 tab(); 23 } 24 }; 25 26 function tab() 27 { 28 for(var i=0;i<aBtn.length;i++) 29 { 30 aBtn[i].className=''; //把所有按钮的样式清空 31 }; 32 aBtn[now].className='active'; //当前按钮样式设置 33 startMove(oUl,{top:-150*now}); //用运动框架把UL的TOP设置为当前个数*-150，第三张图片就是2*-150 34 }; 35 36 function next() 37 { 38 now++; //切换图片 39 if(now==aBtn.length) //如果到了最后一张图片 40 { 41 now=0; // 把图片拉回第一张 42 } 43 tab(); //把图片拉回第一张后继续运动 44 }; 45 46 var timer=setInterval(next,2000); //2秒自动切换图片 47 48 oDiv.onmouseover=function() 49 { 50 clearInterval(timer); //清除定时器 51 }; 52 53 oDiv.onmouseout=function() 54 { 55 timer=setInterval(next,2000); //开启定时器 56 }; 57 }; 58 </script> 59 </head> 60 61 <body> 62 63 <div class="play" id="play"> 64 <ol> 65 <li class="active">1</li> 66 <li>2</li> 67 <li>3</li> 68 <li>4</li> 69 <li>5</li> 70 </ol> 71 <ul> 72 <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li> 73 <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li> 74 <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li> 75 <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li> 76 <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li> 77 </ul> 78 </div> 79 </body> 80 </html>
