<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{margin:0;padding:0;} #div1 {width:712px;height:108px;margin:100px auto;} #div1 ul {position:absolute;left:0;top:0;} #div1 ul li{width:200px;height:200px;background: red;position: absolute;left:200px;top:150px;} </style> <script>//无缝滚动 window.onload= function () { var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oul.getElementsByTagName('li'); var speed=2; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//4+4==8 oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; function move(){ //定时器函数 if(oUl.offsetLeft<-oUl.offsetWidth/2){//offsetLeft偏移量，往左是负数,offsetWidth宽度，是正数。左移 oUl.style.left='0';//坐标重置为0 } if(oul.style.left>0){//右移,负数变0表示右移过了4个li了 oUl.offsetLeft=-oUl.offsetWidth/2+'px';//左偏移量 变成 -宽度一半，表示8个li居中.0不加px,有数字的要加px } oUl.style.left=oDiv.offsetLeft+speed+'px';//给当前对象左边距+2px右移 并返回 } var timer=setInterval(move,30);//参数里面运行有名函数move不用带(),这是js区别于java的不同点 //添加鼠标移入事件 oDiv.onmouseover=function(){//这是匿名类实现方式 clearInterval(timer); }; oDiv.onmouseout=function(){ timer=setInterval(move,30); }; document.getElementsByTagName('a')[0].onclick=function(){ speed=-2; }; document.getElementsByTagName('a')[1].onclick=function(){ speed=2; }; } </script> <body> <a href="javascript:;">向左走</a> <a href="javascript:;">向右走</a> <div id="div1"> <ul> <li><img src="img2/1.jpg" /></li> <li><img src="img2/2.jpg" /></li> <li><img src="img2/3.jpg" /></li> <li><img src="img2/4.jpg" /></li> </ul> </div> </body> </html>