Home >Web Front-end >JS Tutorial >JS implementation method of Taobao slideshow effect_javascript skills
JS implementation method of Taobao slideshow effect_javascript skills
- WBOYOriginal
- 2016-05-16 17:39:331664browse
Implementation ideas:
1. The for loop adds click events to the number buttons.
2. The for loop first clears the button's style, and then sets the current style.
3. Add a custom attribute index aBtn[i].index=i aBtn[2]=2 to each button. If you want the second button to correspond to the second picture, use a motion frame to change the UL of the large picture each time. Move -150px because the image height is 150px. If you move to the nth picture, it is -150*n.
4. Define the variable now for automatic playback. Assign the current image to now now=this.index.
5. Define the autoplay function. now Next picture, if judgment, when reaching the last picture, set now to 0, which is the first picture. if(now==aBtn.length)
6. Define a timer and call the autoplay function every 2 seconds.
7. Clear the timer when the mouse points to the picture.
8. The timer starts when the mouse leaves the picture.
<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; //The current value is assigned to now<BR> tab();<BR> }<BR> };<br><br> function tab()<BR> { for(var i=0;i<aBtn.length;i) <BR> {<BR> aBtn[i ; -150*now}); //Use the motion framework to set UL's TOP to the current number*-150. The third picture is 2*-150<BR> };<BR><BR> function next()<BR> One piece<BR> }<br> tab(); //Pull the picture back to the first one and continue moving<br> };<BR><BR> var timer=setInterval(next,2000); //2 seconds Automatically switch pictures<BR><BR> oDiv.onmouseover=function()<BR> {<BR> clearInterval(timer); //Clear timer<BR> };<BR><br> oDiv.onmouseout=function( ; <br>Full code:<br><br><BR><BR><BR>Copy code<br><br><BR> The code is as follows:<BR><div class="codebody" id="code52143"><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂</title><br> <link href="css.css" rel="stylesheet" type="text/css" /><br> <script src="baseCommon.js"></script>
<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
- 2
- 3
- 4
- 5
