當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS左右无缝滚动（一般方法+面向对象方法）
生活随笔
收集整理的這篇文章主要介紹了
JS左右无缝滚动（一般方法+面向对象方法）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
其實不管是一般方法還是面向對象的方法都還有很多可以改進的地方，有需要的先將就著用吧！-_-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>JS左右無縫滾動（一般方法+面向對象方法）</title> <style type="text/css"> .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } body{background:gray;} #wrap{width:810px; height:160px; border:1px solid black; position:relative; left:50%; top:50%; margin-left:-410px; margin-top:200px; background:#fff; overflow:hidden;} #wrap ul{margin:0px; padding:0px; position:absolute; top:0px; left:0px;} #wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;} #wrap ul li img{ border:1px black solid; padding:10px;} </style> <!--script type="text/javascript">window.οnlοad=function(){ //一般方法var wrap=document.getElementById("wrap");var wrap_ul=wrap.getElementsByTagName("ul")[0];var wrap_li=wrap.getElementsByTagName("li");wrap_ul.innerHTML+=wrap_ul.innerHTML;wrap_ul.style.width=(wrap_li[0].offsetWidth+20)*wrap_li.length+"px";Autoscroll=setInterval(scroll,100);function scroll(){wrap_ul.style.left=wrap_ul.offsetLeft-3+"px"; //這里因為ie對offsetLeft的解析不一樣，所以ie下必須減大于等于3的數if(wrap_ul.offsetLeft<=-wrap_ul.offsetWidth/2){wrap_ul.style.left="0px";}else if(wrap_ul.offsetLeft>=0){wrap_ul.style.left=-wrap_ul.offsetWidth/2+"px";}}wrap.οnmοuseοver=function(){clearInterval(Autoscroll);}wrap.οnmοuseοut=function(){Autoscroll=setInterval(scroll,100);}} </script--> <script type="text/javascript"> function Slide(obj,direction,speed){ //面向對象的方法，可以自由控制方向，speed=>3 ie下可以this.container=document.getElementById(obj);this.content=this.container.getElementsByTagName("ul")[0];this.lis=this.content.getElementsByTagName("li");this.content.innerHTML+=this.content.innerHTML;this.content.style.width=(this.lis[0].offsetWidth+20)*this.lis.length+"px";var that=thisif(direction=="left"){this.speed=-speed}else if(direction=="right"){this.speed=speed}Slide.prototype.scroll=function(){this.content.style.left=this.content.offsetLeft+this.speed+"px";if(this.content.offsetLeft <= -this.content.offsetWidth/2){this.content.style.left ="0px";}else if(this.content.offsetLeft >=0){this.content.style.left = -this.content.offsetWidth/2 + "px"; }}this.time=setInterval(function(){that.scroll()},100);this.container.onmouseover=function(){clearInterval(that.time);}this.container.onmouseout=function(){that.time=setInterval(function(){that.scroll()},100);} } </script> <script type="text/javascript"> window.onload=function(){new Slide("wrap","left",5)} </script></head><body> <div id="wrap"><ul class="clearfix"><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li></ul> </div> </body> </html>?
轉載于:https://www.cnblogs.com/afuge/archive/2012/08/17/2644199.html
總結
以上是生活随笔為你收集整理的JS左右无缝滚动（一般方法+面向对象方法）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【笔记】通过 js——实现 各种跨域
- 下一篇： JavaScript实现继承机制(3)—