<style> *{ margin:0; padding:0; } #outer{ 800px; height:450px; overflow:hidden; position:relative; } #inner{ position:absolute; 4800px; overflow:hidden; } #inner img{ 800px; height:450px; float:left; } #rightBtn{ position:absolute; left:0; top:50%; margin-top:-50px; background:rgba(0,0,0,0.5); 50px; height:100px; font-size:40px; line-height:100px; text-align:center; color:white; } #leftBtn{ position:absolute; right:0; top:50%; margin-top:-50px; background:rgba(0,0,0,0.5); 50px; height:100px; font-size:40px; line-height:100px; text-align:center; color:white; } </style>
<div id="outer"> <div id="inner" style="left:-800px;"> <img src="img/12.jpg" alt="" /> <img src="img/1.jpg" alt="" /> <img src="img/10.jpg" alt="" /> <img src="img/11.jpg" alt="" /> <img src="img/12.jpg" alt="" /> <img src="img/1.jpg"/> </div> <div id="rightBtn"><</div> <div id="leftBtn">></div> </div> <script type="text/javascript"> function scroll(obj1,obj2,obj3){ this.obj1 = obj1; this.obj2 = obj2; this.obj3 = obj3; } scroll.prototype.move = function(){ this.oLeft = parseInt(this.obj1.style.left); var that = this; this.obj2.onclick = function(){ that.scrollLeft(); } this.obj3.onclick = function(){ that.scrollRight(); } } scroll.prototype.scrollLeft = function(){ var that = this; clearInterval(this.time); clearTimeout(this.time1); this.time = setInterval(movestart,1); function movestart(){ that.oLeft--; if(that.oLeft%800==0){ if(that.oLeft==(-4000)){ that.oLeft = -800; } clearInterval(that.time); that.time1 = setTimeout(function(){ that.time = setInterval(movestart,1); },1000) } that.obj1.style.left = that.oLeft + "px"; } } scroll.prototype.scrollRight = function(){ var that = this; clearInterval(this.time); clearTimeout(this.time1); this.time = setInterval(movestart,1); function movestart(){ that.oLeft++; if(that.oLeft%800==0){ if(that.oLeft==0){ that.oLeft = -3200; } clearInterval(that.time); that.time1 = setTimeout(function(){ that.time = setInterval(movestart,1); },1000) } that.obj1.style.left = that.oLeft + "px"; } } window.onload = function(){ var inner = document.getElementById("inner"); var rightBtn = document.getElementById("rightBtn"); var leftBtn = document.getElementById("leftBtn"); var scrollnow = new scroll(inner,leftBtn,rightBtn); scrollnow.move(); } </script>