js实现可控制左右方向的无缝滚动效果

本文实例为大家分享了无缝滚动效果JavaScript代码实现，供大家参考，具体内容如下】
效果图：

实现代码：

<！DOCTYPE html><html><head><meta charset="gb2312" /><title>zzzz</title><style>*{margin: 0;padding:0;}body{width: 1000px;margin: 100px auto;background-color: #fff;}#wrapper{overflow: hidden;width: 600px;height: 100px;position: relative; }#wrapper ul {position: absolute;left: 0;top: 0;}#wrapper li{float: left;list-style: none;}#wrapper li img{width: 150px;height: 100px;border-radius: 9px;}input[type=button]{margin-top: 20px;width: 35px; height: 25px;line-height: 25px;}</style><script type="text/javascript">window.onload=function（）{var timer=null;var speed=4;var od=document.getElementById（"wrapper"）;var au=od.getElementsByTagName（"ul"）[0];var ali=au.getElementsByTagName（"li"）;au.innerHTML=au.innerHTML+au.innerHTML;au.style.width=ali[0].offsetWidth*ali.length+"px";timer=setInterval（move,30）function move（）{if（au.offsetLeft<-au.offsetWidth/2）{au.style.left="0";}if（au.offsetLeft>0）{au.style.left=-au.offsetWidth/2+"px";}au.style.left=au.offsetLeft+speed+"px";}od.onmouseover=function（）{clearInterval（timer）;}od.onmouseout=function（）{timer=setInterval（move,30）}document.getElementById（"btn1"）.onclick=function（）{speed=-4;}document.getElementById（"btn2"）.onclick=function（）{speed=4;}}</script></head><body><div id="wrapper"><ul><li><img src="img/pic4.jpg"/></li><li><img src="img/pic3.jpg"/></li><li><img src="img/pic2.jpg"/></li><li><img src="img/pic1.jpg"/></li></ul></div><input type="button" name="" id="btn1" value="向左" /><input type="button" id="btn2" value="向右"/></body></html>

大家可以参考以下专题进行学习：
《JavaScript滚动效果汇总》《jQuery滚动效果汇总》《JavaScript图片轮播效果汇总》
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。