Heim >Web-Frontend >js-Tutorial >JS实现淘宝幻灯片效果的实现方法_javascript技巧

JS实现淘宝幻灯片效果的实现方法_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:39:331664Durchsuche

实现思路:

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、鼠标离开图片时就开启定时器。

复制代码 代码如下:

 <script><BR> window.onload=function()<BR> {<BR> var oDiv=document.getElementById('play');<BR> var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');<BR> var oUl=oDiv.getElementsByTagName('ul')[0];<BR> var now=0;<br><br> for(var i=0;i<aBtn.length;i++)<BR> {<BR> aBtn[i].index=i;<BR> aBtn[i].onmouseover=function()<BR> {<BR> now=this.index; //当前值赋给now<BR> tab();<BR> }<BR> };<br><br> function tab()<BR> { <BR> for(var i=0;i<aBtn.length;i++) <BR> {<BR> aBtn[i].className=''; //把所有按钮的样式清空<BR> };<BR> aBtn[now].className='active'; //当前按钮样式设置<BR> startMove(oUl,{top:-150*now}); //用运动框架把UL的TOP设置为当前个数*-150,第三张图片就是2*-150<BR> };<br><br> function next()<BR> {<BR> now++; //切换图片<BR> if(now==aBtn.length) //如果到了最后一张图片<BR> {<BR> now=0; // 把图片拉回第一张<BR> }<BR> tab(); //把图片拉回第一张后继续运动<BR> };<br><br> var timer=setInterval(next,2000); //2秒自动切换图片<br><br> oDiv.onmouseover=function()<BR> {<BR> clearInterval(timer); //清除定时器<BR> };<br><br> oDiv.onmouseout=function()<BR> {<BR> timer=setInterval(next,2000); //开启定时器<BR> };<BR> };<BR> </script>

完整代码:

复制代码 代码如下:


 
 
 
 淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂
 
 
 <script><BR> window.onload=function()<BR> {<BR> var oDiv=document.getElementById('play');<BR> var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');<BR> var oUl=oDiv.getElementsByTagName('ul')[0];<BR> var now=0;<br><br> for(var i=0;i<aBtn.length;i++)<BR> {<BR> aBtn[i].index=i;<BR> aBtn[i].onmouseover=function()<BR> {<BR> now=this.index; //当前值赋给now<BR> tab();<BR> }<BR> };<br><br> function tab()<BR> { <BR> for(var i=0;i<aBtn.length;i++) <BR> {<BR> aBtn[i].className=''; //把所有按钮的样式清空<BR> };<BR> aBtn[now].className='active'; //当前按钮样式设置<BR> startMove(oUl,{top:-150*now}); //用运动框架把UL的TOP设置为当前个数*-150,第三张图片就是2*-150<BR> };<br><br> function next()<BR> {<BR> now++; //切换图片<BR> if(now==aBtn.length) //如果到了最后一张图片<BR> {<BR> now=0; // 把图片拉回第一张<BR> }<BR> tab(); //把图片拉回第一张后继续运动<BR> };<br><br> var timer=setInterval(next,2000); //2秒自动切换图片<br><br> oDiv.onmouseover=function()<BR> {<BR> clearInterval(timer); //清除定时器<BR> };<br><br> oDiv.onmouseout=function()<BR> {<BR> timer=setInterval(next,2000); //开启定时器<BR> };<BR> };<BR> </script>
 

 

 

    

            
  1. 1

  2.         
  3. 2

  4.         
  5. 3

  6.         
  7. 4

  8.         
  9. 5

  10.     

    

            
  • 广告一

  •         
  • 广告二

  •         
  • 广告三

  •         
  • 广告四

  •         
  • 广告五

  •     

 

 
 
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn