上一篇写的关于放大镜的，可能在实际开发中用的不是很多，接下来将的图片无缝滚动在实际工作中就是用的比较多的了。
如上图，通过定时器控制图片无缝滚动，当鼠标悬浮时停止滚动，鼠标离开，滚动继续。
主要原理是通过定位实现图片的移动，然后通过定时器实现滚动的效果，即无缝滚动。
首先是基础的结构
<!DOCTYPE html> <html> <head> <title>无缝滚动</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;float:left;} li{margin: 5px;border:3px double #00a67c;float:left;} li img{width:150px;float:left;} #demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;} #indemo{width:800%;float:left;} </style> </head> <body> <div id="demo"> <div id="indemo"> <ul id="demo1"> <li><img src="img/pic1.jpg"></li> <li><img src="img/pic2.jpg"></li> <li><img src="img/pic3.jpg"></li> <li><img src="img/pic4.jpg"></li> <li><img src="img/pic5.jpg"></li> <li><img src="img/pic6.jpg"></li> <li><img src="img/pic7.jpg"></li> </ul> <ul id="demo2"></ul> </div> </div> </body> </html>
有了基本结构后，就要让图片动起来，为了实现图片的无缝滚动，将存放图片的ul进行复制，放在其后，模拟循环效果。其次，每当图片滚动到复制元素的最后一张图片时，就应该让图片重新回到最开始的状态再继续滚动，这样的话就形成了无缝循环滚动的效果。
<script type="text/javascript"> window.onload = function(){ var age = 20; var tab = document.getElementById('demo'); var tab1 = document.getElementById('demo1'); var tab2 = document.getElementById('demo2'); tab2.innerHTML = tab1.innerHTML; function run(){ //tab1的宽度小于 tab被隐藏的宽度； if(tab1.offsetWidth - tab.scrollLeft <=0 ){ //重置tab被隐藏的宽度 tab.scrollLeft -= tab1.offsetWidth; }else { tab.scrollLeft++; } }; var mymar = setInterval(run,age); } </script>
最后就是优化了，当鼠标悬浮时停止滚动，鼠标离开后继续滚动。
<script type="text/javascript"> tab.onmouseover = function(){ clearInterval(mymar); } tab.onmouseout = function(){ mymar = setInterval(run,age); } </script>
到此，我们就实现了最开始想要的效果了，完整代码如下：
<!DOCTYPE html> <html> <head> <title>无缝滚动</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;float:left;} li{margin: 5px;border:3px double #00a67c;float:left;} li img{width:150px;float:left;} #demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;} #indemo{width:800%;float:left;} </style> </head> <body> <div id="demo"> <div id="indemo"> <ul id="demo1"> <li><img src="img/pic1.jpg"></li> <li><img src="img/pic2.jpg"></li> <li><img src="img/pic3.jpg"></li> <li><img src="img/pic4.jpg"></li> <li><img src="img/pic5.jpg"></li> <li><img src="img/pic6.jpg"></li> <li><img src="img/pic7.jpg"></li> </ul> <ul id="demo2"></ul> </div> </div> <script type="text/javascript"> window.onload = function(){ var age = 20; var tab = document.getElementById('demo'); var tab1 = document.getElementById('demo1'); var tab2 = document.getElementById('demo2'); tab2.innerHTML = tab1.innerHTML; function run(){ if(tab1.offsetWidth - tab.scrollLeft <=0 ){ tab.scrollLeft -= tab1.offsetWidth; }else { tab.scrollLeft++; } }; var mymar = setInterval(run,age); tab.onmouseover = function(){ clearInterval(mymar); } tab.onmouseout = function(){ mymar = setInterval(run,age); } } </script> </body> </html>
完整详细代码链接：点这里