方法一:
<!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>