1.实现原理：setInterval定时器，让某元素position的left属性定时滚动，使用到js中的元素的offsetLeft属性。
2.案例：1.css的实现是外div是4张图片的总宽度，设置relative然后overflow隐藏。子代有ul层设置为absolute;left属性移动时都是移动整个ul层的。;
2.4张图片无缝滚动，再复制4张（1，2，3，4）在第4张后面，li下有4张图片，获取li的offsetWidth(),然后算出ul的总宽度，当包着4张图片的ul层的offsetLeft滚动到一半的时候，将前4张的left变成0，这样滚动的时候就会无缝滚动了。设置ul层的offsetLeft来控制滚动。
3.demo地址：http://www.alanjs.comeze.com/study/demo11setInterval.html
<script type="text/javascript"> window.onload = function(){ var slide = document.getElementById("slideImg"); var moveUl = document.getElementById("moveUl"); var aLi = slide.getElementsByTagName("li"); var timer = null; var speed = -2; var prev = document.getElementById("prev"); var next = document.getElementById("next"); moveUl.innerHTML = moveUl.innerHTML + moveUl.innerHTML; //先复制4张图片放在后面 moveUl.style.width = aLi[0].offsetWidth*aLi.length + "px"; //获取一个li的宽度来设置ul层的总宽度 timer = setInterval(move,30) slide.onmouseover = function(){ if(timer){ clearInterval(timer); } } slide.onmouseout = function(){ timer = setInterval(move,30); } prev.onclick = function(){ speed = -2; } next .onclick = function(){ speed = 2; } function move(){ if(moveUl.offsetLeft < -moveUl.offsetWidth/2){ //向左滚动,当滚动到一半的时候，前面4张就跳到后面 moveUl.style.left = "0"; } if(moveUl.offsetLeft > 0){ moveUl.style.left = -moveUl.offsetWidth/2 + "px"; //向右滚动,当一开始滚动的时候，ul的left属性大于0，后面4张就立即跳到前面
}
moveUl.style.left = moveUl.offsetLeft+speed + "px"; //设置ul层的offsetLeft来控制滚动
}
}
</script>
<style> #wrap{width:1603px;margin:0 auto;height:300px;} #sliderImg{width:1308px;height:203px;position:relative;overflow:hidden;border:1px solid red;} #sliderImg ul{positin:absolute;left:0px;top:0px;} #sliderImg ul li{list-style:none;float:left} </style> <body> <div id="wrap"> <div id="sliderImg"> <ul id="moveUl"> <li><a href="javascript:;"><img src="images/slide5.jpg" /></a></li> <li><a href="javascript:;"><img src="images/slide6.jpg" /></a></li> <li><a href="javascript:;"><img src="images/slide7.jpg" /></a></li> <li><a href="javascript:;"><img src="images/slide8.jpg" /></a></li> </ul> </div> <a id="prev" href="javascript:;">prev</a> <a id="next" href="javascript:;">next</a> </div> </body>