“向左”，“滾動”，這是要解決的要點，而這兩方向，都與對象的scrollLeft屬性相關。對於scrollLeft,直白理解就是：對象的內容（即其整個innerHTML)，如果能夠左右滾動的話（這是前提條件），它在某時刻左邊滾動了的像素距離（結果為數字，並且該屬性是可寫可讀的）。這里需要注意的是，雖然document.body.scrollLeft需要考慮兼容性問題，但其它的div的scrollLeft是兼容的，這里無需考慮兼容性問題。
所以不管讀取或者設置scrollLeft的值，都必須有個前提條件：能左右滾動！！！
比如有一個id=mydiv的DIV,在一個不能左右滾動的前提條件下，比如其overflow設置為visible或者overflow沒有設置.它會怎么樣呢？
mydiv會表現為被內容自動撐開,內容有多長多寬，div就自動多長多寬，div不出現滾動條。這時候scrollLeft讀取到的值為0，並且無論如何設置scrollLeft的值，它都為0。這可以說明，如果其不能左右滾動，那scrollLeft就一直為0.
接下來，我們准備制造出“能左右滾動”的這種前提條件。
要出現scrollLeft，就必須：能左右滾動。這個限制會讓我們將對象的overflow屬性設置成auto，hidden,scroll,並且限制對象的width。但往往auto只會造成上下滾動而非左右。所以我們只能考慮scroll與hidden。
考慮以下代碼：
<style> #mydiv{width:600px;height:100px; margin:100px; border: 3px solid #8ec2f5; padding:0; background:#d6e9fc;overflow:scroll;} </style> <div id="mydiv"> 內容... </div>
它的效果是：
我們雖然設置了overflow為scroll。它能左右滾動了嗎？不能。雖有滾動條，但呈灰色，不能左右拉動。因為overflow:scroll的前提是內容超出指定的寬高才會出現的，由於里邊的內容不夠長，最終導致不會出現左右方面的scroll點。
在實際場景下，我們的內容是可以很長的，放幾張美女圖片，增長內容，比如：
<style> #mydiv{width:600px; height:100px; margin:20px;border: 3px solid #8ec2f5; padding:0; background:#d6e9fc; overflow:scroll;} img {width:100px; height:100px;} </style> <div id="mydiv"> <a href="#"><img src="http://h.hiphotos.baidu.com/image/h%3D300/sign=1655a14ec15c10383b7ec8c28211931c/2cf5e0fe9925bc31a365a0cc59df8db1cb1370ae.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/503d269759ee3d6d26a5088c44166d224f4ade12.jpg"></a> <a href="#"><img src="http://h.hiphotos.baidu.com/image/pic/item/f703738da9773912f4750a26ff198618367ae222.jpg"></a> <a href="#"><img src="http://g.hiphotos.baidu.com/image/pic/item/0ff41bd5ad6eddc447d63bbc3edbb6fd52663347.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/b21bb051f81986187d1660c34ded2e738bd4e620.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/1f178a82b9014a90b559c9faae773912b31bee16.jpg"></a> <a href="#"><img src="http://a.hiphotos.baidu.com/image/pic/item/b3fb43166d224f4a58fcfc540ef790529822d114.jpg"></a> <a href="#"><img src="http://f.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6b057d72fafaaf51f3de6647.jpg"></a> </div>
其效果如下：
內容已經足夠長的啦。但它出現了上下滾動條，沒有出現左右滾動條。因為它自動換行了。我們讓它浮動吧，希望它能變成行內元素。
#mydiv a {float:left;margin:0 10px;}
但浮動這是沒作用的。mydiv的寬高已經固定，a作為其子元素，如何浮動到一定寬度一定會自動換行。我們不能變化mydiv的寬度，那如何辦呢？大家應該都能想到：
再套一個div,作為mydiv的子元素，設定其寬很長很長。
代碼如下：
<!DOCTYPE html> <html> <style> #mydiv{width:600px; height:100px; margin:20px;border: 3px solid #8ec2f5; padding:0; background:#d6e9fc; overflow:scroll;} #mysubdiv{margin:0; padding:0;width:9999px; height:100px;} img {width:100px; height:100px;} #mydiv a {float:left;margin:0 10px;} </style> <div id="mydiv"> <div id="mysubdiv"> <a href="#"><img src="http://h.hiphotos.baidu.com/image/h%3D300/sign=1655a14ec15c10383b7ec8c28211931c/2cf5e0fe9925bc31a365a0cc59df8db1cb1370ae.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/503d269759ee3d6d26a5088c44166d224f4ade12.jpg"></a> <a href="#"><img src="http://h.hiphotos.baidu.com/image/pic/item/f703738da9773912f4750a26ff198618367ae222.jpg"></a> <a href="#"><img src="http://g.hiphotos.baidu.com/image/pic/item/0ff41bd5ad6eddc447d63bbc3edbb6fd52663347.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/b21bb051f81986187d1660c34ded2e738bd4e620.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/1f178a82b9014a90b559c9faae773912b31bee16.jpg"></a> <a href="#"><img src="http://a.hiphotos.baidu.com/image/pic/item/b3fb43166d224f4a58fcfc540ef790529822d114.jpg"></a> <a href="#"><img src="http://f.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6b057d72fafaaf51f3de6647.jpg"></a> </div> </div>
效果：
現在終於左右能滾動了。此時，我們的scrollLeft可以派上用場了：
<script> var mydiv = document.getElementById('mydiv'); mydiv.scrollLeft=300; document.title=mydiv.scrollLeft; </script>
效果如下：
既然scrollLeft是可讀可寫的，並且在一開始的時候，它的值為0.我們現在讓scrollLeft每秒增加10。一個向左滾動的原型就出現了。
<script> var mydiv = document.getElementById('mydiv'); var myScroll = function(){ mydiv.scrollLeft=mydiv.scrollLeft+10; document.title=mydiv.scrollLeft; } window.setInterval(myScroll,1000); </script>
效果如下：
目前它的缺點就是：由於9999px長度的mysubdiv的空白還要走。
那有什么辦法，讓它不走空白，而走重復的圖片內容呢？大家很容易就想到，將空白的內容用重復的圖片占用掉就可以了。最容易的辦法，就是再diy幾個mysubdiv的innerHTML，接在原先的后面，要做到這樣，可以采用再套子div的辦法，代碼如下：
<!DOCTYPE html> <html> <style> #mydiv{width:600px; height:100px; margin:20px;border: 3px solid #8ec2f5; padding:0; background:#d6e9fc; overflow:hidden;} #mysubdiv{margin:0; padding:0;width:9999px; height:100px;} #mypicdiv{margin:0; padding:0;width:auto; height:100px; float:left;} #mypicdiv2{margin:0; padding:0;width:auto; height:100px;float:left;} img {width:100px; height:100px;} #mydiv a {float:left;margin:0 10px;} </style> <div id="mydiv"> <div id="mysubdiv"> <div id="mypicdiv"> <a href="#"><img src="http://h.hiphotos.baidu.com/image/h%3D300/sign=1655a14ec15c10383b7ec8c28211931c/2cf5e0fe9925bc31a365a0cc59df8db1cb1370ae.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/503d269759ee3d6d26a5088c44166d224f4ade12.jpg"></a> <a href="#"><img src="http://h.hiphotos.baidu.com/image/pic/item/f703738da9773912f4750a26ff198618367ae222.jpg"></a> <a href="#"><img src="http://g.hiphotos.baidu.com/image/pic/item/0ff41bd5ad6eddc447d63bbc3edbb6fd52663347.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/b21bb051f81986187d1660c34ded2e738bd4e620.jpg"></a> <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/1f178a82b9014a90b559c9faae773912b31bee16.jpg"></a> <a href="#"><img src="http://a.hiphotos.baidu.com/image/pic/item/b3fb43166d224f4a58fcfc540ef790529822d114.jpg"></a> <a href="#"><img src="http://f.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6b057d72fafaaf51f3de6647.jpg"></a> </div> <div id="mypicdiv2"></div> </div> </div> <script> var mydiv = document.getElementById('mydiv'); var mypicdiv = document.getElementById('mypicdiv'); var mypicdiv2 = document.getElementById('mypicdiv2'); mypicdiv2.innerHTML = mypicdiv.innerHTML; var myScroll = function(){ mydiv.scrollLeft=mydiv.scrollLeft+10; document.title=mydiv.scrollLeft; } window.setInterval(myScroll,1000); </script>
目前它要走的空白已經短了，為了讓它的空白全部消除，最原先我們的辦法可以是：
1.多造幾個mypicdiv那樣的浮動塊，占夠位置。
2.將mysubdiv的width改少一些。
但這兩種辦法都無法徹底將空白刪除，不是剩余空白就是不夠空白導致換行。
那有沒有一種辦法能夠不用消滅空白而直接可以“連接向左滾動”的呢？
辦法就是：當剛好滾動了一個mypicdiv的距離的時候（"剛好"的意思，這需要很精細的刻度，所以需要讓scrollLeft每次變化盡量少，即每次變化+1,而一個mypicdiv的距離，需要用到對象屬性：offsetWidth），又重新回到mypicdiv去滾動（即讓scrollLeft=0)。這樣，就會連續滾動mypicdiv,並且后邊接着的mypicdiv2就能造成無縫的效果。
代碼如下：
<script> var mydiv = document.getElementById('mydiv'); var mypicdiv = document.getElementById('mypicdiv'); var mypicdiv2 = document.getElementById('mypicdiv2'); mypicdiv2.innerHTML = mypicdiv.innerHTML; var myScroll = function(){ if(mydiv.scrollLeft>=mypicdiv.offsetWidth){ mydiv.scrollLeft = 0; }else{ mydiv.scrollLeft=mydiv.scrollLeft+1; } document.title=mydiv.scrollLeft; } /* //根據人眼每幀看到24幅畫面以上則認為是連續動畫效果，讓1000/24~=42.當數量大於24時，speed小於42,設置speed為小於42的數值最佳，讓滾動顯示無縫，流暢。 //另外，速度越小，滾動越快 */ var speed = 20; window.setInterval(myScroll,speed); </script>
以上代碼調整了變化的速度，以及大小。
效果如下：
這樣就簡單地完成了一個圖片無縫向左滾動。設置mydiv的overflow:hidden，去除滾動條（但隱式地有“能左右滾動”），讓美觀更好一點。注意：document.title=mydiv.scrollLeft;這一行只用於調試查看，實際用途中必須刪除。
從html結構（及相關CSS設置）上看，需要達到的條件如下圖所示：
從JS角度上看，需要知道的技術也不過如下：
innerHTML,scrollLeft,offsetWidth,setInterval
所以如果需要簡單地寫一個圖片無縫向左滾動，還是可以輕易完成的。