js实现无缝循环滚动

本文实例为大家分享了js无缝循环滚动实现代码，供大家参考，具体内容如下
1、图片格式：260*400.
2、使用循环定时器轻松实现

<！doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝滚动</title></head><style type="text/css"> .row{width: 1298px;height: 400px;border: 1px solid;box-shadow:2px 2px 2px #000;overflow: hidden; } .box{position: relative; } .box1,.box2{width: 1298px;position: absolute; } .box2{left:1298px; } img{float: left; }</style><body> <div class="row"><div class="box" id="box"> <div class="box1" id="box1"><img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"> </div> <div class="box2" id="box2"><img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"> </div></div> </div></body><script type="text/javascript"> window.onload = function（）{var _box1 = document.getElementById（"box1"）;var _box2 = document.getElementById（"box2"）;var x = 0;var fun = function（）{ _box1.style.left = x + "px"; _box2.style.left = （x +1298） + "px"; x--; if（（x +1298） == 0）{x = 0; }}setInterval（fun,1）; }</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助。