方法一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #outside{ width: 1200px; overflow: hidden; margin: 0 auto; height: 300px; } #outside #inside{ width: 3100px; } #outside #inside div{ width: 300px; height: 300px; margin: 0px 5px; background-color: red; float: left; } </style> </head> <body> <div id="outside"> <div id="inside"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </div> </body> </html> <script type="text/javascript"> var num = 0; var inside = document.getElementById("inside"); setInterval(function(){ num-=1; inside.style.marginLeft = num+"px"; console.log(inside.style.marginLeft); if(num<=-1860){ num = 0; } },1); </script>
方法二：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 800px; height: 200px; overflow: hidden; } #div{ width: 1000000px; } #div1,#div2{ width: auto; float: left; } img{ width: 200px; height: 200px; } </style> </head> <body> <div id="outside"> <div id="div"> <div id="div1"> <img src="../img/2017-03-14_124354.png" /> <img src="../img/2017-03-14_124422.png"/> <img src="../img/2017-03-14_124708.png"/> <img src="../img/2017-03-14_131608.png"/> </div> <div id="div2"></div> </div> </div> <script type="text/javascript"> var outside=document.getElementById("outside"); var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); div2.innerHTML=div1.innerHTML; var gunDong=setInterval(function(){ if(div2.offsetWidth-outside.scrollLeft<=0) { outside.scrollLeft-=div1.offsetWidth }else{ outside.scrollLeft++; } },10) //.offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 //.scrollLeft 代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度 outside.onmouseover=function() { clearInterval(gunDong); //鼠标放上滚动停止 } outside.onmouseout=function() {//鼠标移开继续滚动 gunDong=setInterval(function(){ if(div2.offsetWidth-outside.scrollLeft<=0) { outside.scrollLeft-=div1.offsetWidth }else{ outside.scrollLeft++; } },10) } </script> </body> </html>