爲了教學需要，整理了一下JS圖片無縫滾動的代碼。
以前一直均是拷貝網上的經典JS滾動代碼，稍爲更改即成自己的了，現重新講解下，JS是如何讓圖片們動起來的！
下面是網上源碼，百度一大堆，多數是這個樣，如果你是爲了解決實際效果顯示，請拷貝，勿需向後翻看。
<!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=gb2312" />
<title>圖片滾動</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
1、如何讓圖片動起來？
解決動的問題，一定要和時間有關，JS中主要有兩個函數setTimeout()和setInterval().兩個函數的區別，可以百度，一般setTimeout()要放到body onload事件中。
（1）先讓DIV能動再說。
<style type="text/css">
#imagelist{
}
</style>
<script language="javascript">
function move(){
var obj=document.getElementById("imagelist");
obj.style.cssText="position:relative;left:100px;";
}
</script>
<div id="imagelist">
這兒先放一些文字，只要能演示效課就可以了。只要能動，後面的邏輯相信大家都能解決！！！！！！
</div>
<a href="#" onclick="move()">點擊讓div運動</a>
點擊下方的文字，就能看到div向後移動了一下，ok,下面就好解決了！
（2）不斷的點擊下方的文字鏈接，div就不斷向後移動耶！！代碼如下：
<script language="javascript">
var seq=0;
function move(){
seq++;
var range=seq*20;
var obj=document.getElementById("imagelist");
obj.style.cssText="position:relative;left:"+range+"px;";
}
</script>
<div id="imagelist">
這兒先放一些文字，只要能演示效課就可以了。只要能動，後面的邏輯相信大家都能解決！！！！！！
</div>
<a href="#" onclick="move()">點擊讓div運動</a>
（3）在move()函數中添加settimeout(),實現時間函數的遞歸調用，用onload事件調用move()函數，一切OK！！，至於如何做圖片滾動，如何讓滾動的更自然，自己動手啦！
<body onload="move()">
<script language="javascript">
var seq=0;
function move(){
seq++;
var range=seq*20;
var obj=document.getElementById("imagelist");
obj.style.cssText="position:relative;left:"+range+"px;";
setTimeout("move()",100);
}
</script>
<div id="imagelist">
這兒先放一些文字，只要能演示效課就可以了。只要能動，後面的邏輯相信大家都能解決！！！！！！
</div>
</body>
2.ScrollLeft是什麼鬼？爲什麼網上都是該屬性配合setInterval()實現滾動呢？
ScrollLeft是當裏面的內容超過邊界，即有滾動條時，讓裏面的內容left的值不斷改變而實現的效果。即父子兩個div,若要能用ScrollLeft實現滾動，是有前提的：a.父div溢出要隱藏。 b.子div一定要比父div寬。這個實驗大家可以結合上面的例子修改完成。
setInterval()是每隔一段時間間隔做什麼事情，只要調用一次即可，並不一定要放在onload事件中。
下面代碼中的樣式是必須的喲，不然不能動，你懂得，呵呵！
<script language="javascript">
var seq=0;
function move(){
var obj=document.getElementById("outdiv");
obj.scrollLeft++;
}
</script>
</head>
<body >
<script>
var s=setInterval(move,10);
</script>
<a href="#">點擊</a>
<div id="outdiv" style="width:200px; overflow:hidden;">
<div id="indiv" style="width:400px; float:left;">這兒先放一些文字，只要能演示效課就可以了。只要能動，後面的邏輯相信大家都能解決！！！！！！
</div>
</div>