-
巧用定时器
- 获取标签方式
- 清理定时器
- 记住当前位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播</title> <style> *{ padding: 0; margin: 0; } ul{ list-style:none; } .warper{ width: 400px; height: 319px; /*background-color: #A9A9A9;*/ margin: 0 auto; overflow: hidden; position: relative; } ul li{ float: left; } ul{ width: 800%; position: absolute; top: 0; left: 0; } ul li img{ width: 400px; height: 319px; } </style> </head> <body> <div id="lb" class="warper"> <ul> <li><img src="img/lb/1.jpg"> </li> <li><img src="img/lb/2.jpg"> </li> <li><img src="img/lb/3.jpg"> </li> <li><img src="img/lb/4.jpg"> </li> <li><img src="img/lb/5.jpg"> </li> <li><img src="img/lb/6.jpg"> </li> <li><img src="img/lb/7.jpg"> </li> <li><img src="img/lb/8.jpg"> </li> </ul> </div> </body> <script type="text/javascript"> var box=document.getElementsByClassName("warper")[0]; var ul=box.children[0];<!--获取子集第一个标签--> var num=0;//一定要在循环外面记住left位置 var timer=null; timer=setInterval(autoPlay,30);//打卡页面就开始播放 function autoPlay(){ num--; num <= -2800?num=0:num;<!--如果num小于-3200，num=0，否则num--> ul.style.left=num+"px"; } //鼠标放上去清除定时器，即暂停播放 box.onmouseover=function () { clearInterval(timer); }; //鼠标移走，先清除定时器，再开启轮播 box.onmouseout=function () { clearInterval(timer); timer=setInterval(autoPlay,30); } </script> </html>