在圖片滾動的方法中，最常用的就是scroll方法。
上圖所示的滾動條，我們稱爲srcollBar。在div的內容寬度超過div的寬度時。我們給div加屬性overflow-x:scroll；就會出現這種效果。見得最多的scrollBar就是瀏覽器右側的了。大家都很熟悉。當我們拖動滾動條的時候，未顯示部分就會隨着拖動顯示出來。我們拖動的距離，就是scroll的大小，拖動的距離在四個不同方向上，就有了scrollLeft，scrollRight，scrollTop，scrollBottom四個屬性。
這裏我們以scrollLeft爲例，其他三個都是一樣的。由scrollLeft的由來，我們可以知道，如果scrollLeft值遞增，效果也就相當於滾動條在向右拖動。在沒有scrollBar的情況下，增加scrollBar的值，同樣會有內容左移的效果。
也就是說使用scrollLeft的必要條件是
第一：此標籤的內容寬度超過了標籤本身的寬度。
這個很容易理解，如果內容沒有超過標籤的寬度，不需要橫向的滾動就可以看到所有橫向的範圍，那在使用scrollLeft的時候肯定是無效的了。
在這裏很多新手經常會犯一個錯誤，內容的大小確實是超過了標籤的顯示範圍，但是卻因爲瀏覽器的默認屬性換行了，也就是沒有在橫向上超出，這時候同樣是不能使用scrollLeft的。
第二：scrollLeft的值範圍是在一定範圍內的，不能無限增大。
當內容的最右端可以顯示的時候，scrollLeft便不能再增加了。這個也容易理解。以瀏覽器右側滾動條爲例，這個滾動條肯定是能拖到底的，這個拖動有一定的範圍，跟頁面內容高度有關。
第三：scrollLeft（包括其他三個）常與定時器一起使用，實現位置移動效果，如滾動。
這條就沒什麼好解釋的了。定時器上一篇文章剛寫了。
下面看一個滾動效果的實例。非常簡單，就是內容從左滾動最右的效果。如果有興趣的話可以吧內容換成圖片什麼的，看起來會漂亮些。
<!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=utf-8" />
<title>滾動圖片</title>
<style type="text/css">
body,div{border:0;margin:0;padding:0;}
#outer {overflow:hidden;width:300px;border:1px red solid;margin:50px auto;height:148px;}
.part1 {height:140px;width:500px;overflow:hidden;border:4px blue solid;}
</style>
</head>
<body>
<div id="outer">
<div class="part1">
這裏可以放圖片什麼的。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</div>
</div>
</body>
<script type="text/javascript" language="javascript">
function test() {
document.getElementById("outer").scrollLeft++;
}
var run = setInterval(test,100);
</script>
</html>