效果
图片大小均为200*200;
默认向左循环滚动;
鼠标悬浮暂停，鼠标移走继续滚动;
可以在此基础进行扩展。
下面是代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{ padding:0px; margin:0px; } #main{ width:800px; margin:100px auto; text-align:center; } #box{ width:800px; height:200px; margin:20px auto; position:relative;/*相对于起点*/ /*background:red;*/ overflow:hidden; } ul{ position:absolute; left:0px; top:0px; } ul li{ list-style:none; width:200px; height:200px; float:left; margin:0px 1px; } #main button{ padding:10px; margin:0px 10px; border:0px; background:#ddd; } #main button:hover{ background:#E9AF16; cursor:pointer; } </style> </head> <body> <div id="main"> <h2>无缝滚动</h2> <div id="box"> <ul> <li><img src="images/p1.jpg" alt="p1"></li> <li><img src="images/p2.jpg" alt="p2"></li> <li><img src="images/p3.jpg" alt="p3"></li> <li><img src="images/p4.jpg" alt="p4"></li> </ul> </div> <button>向左</button><button>向右</button> </div> <script> var oBox=document.getElementById("box"); var aUl=oBox.getElementsByTagName("ul")[0]; var aLi=oBox.getElementsByTagName("li"); var speed=2; aUl.innerHTML=aUl.innerHTML+aUl.innerHTML;//使li增加一倍 aUl.style.width=aLi[0].offsetWidth*aLi.length+"px";//修改aUl框的宽度,注意单位 function move(){ //向左移动aUl.offsetLeft是负的,我们需要把aUl的一半宽度放置在div右侧 if(aUl.offsetLeft<-aUl.offsetWidth/2){ aUl.style.left=0+"px";//将ul放回原位 } //向右移动aUl.offsetLeft是大于0的,我们需要把aUl的一半宽度放置在div左侧 if(aUl.offsetLeft>0){ aUl.style.left=-aUl.offsetWidth/2+"px";//放置在div左侧,left为负值 } aUl.style.left=aUl.offsetLeft-speed+"px";//整体移动ul,右 } timer=setInterval(move,30); aUl.onmouseover=function(){ clearInterval(timer); } aUl.onmouseout=function(){ timer=setInterval(move,30); } var aBtn=document.getElementsByTagName("button"); aBtn[0].onmouseover=function(){ speed=2; } aBtn[1].onmouseover=function(){ speed=-2; } </script> </body> </html>AI 代码解读
