以下代码实现：
结构跟行为相分离，两者的联系只需要一个id，且同一个js代码可以在本页面多处使用，之间互不干扰。
具体看下面的代码吧。
1，xhtml部分
复制代码 代码示例:
<div class="demo" id="demo1">
<table cellpadding="0" cellspacing="0">
<tr>
<td><ul>
<li><img src="img.jpg"><br>
滚动图1</li>
<li><img src="img.jpg"><br>
滚动图2</li>
<li><img src="img.jpg"><br>
滚动图3</li>
<li><img src="img.jpg"><br>
滚动图4</li>
</ul></td>
</tr>
</table>
</div>
<!--第二个滚动图开始-->
<div class="demo" id="demo2">
<table cellpadding="0" cellspacing="0">
<tr>
<td><ul>
<li><img src="img.jpg"><br>
滚动图1</li>
<li><img src="img.jpg"><br>
滚动图2</li>
<li><img src="img.jpg"><br>
滚动图3</li>
<li><img src="img.jpg"><br>
滚动图4</li>
</ul></td>
</tr>
</table>
</div>
2，css部分
复制代码 代码示例:
ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding:0;}
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;}
.demo ul{width:408px;clear:both;}
.demo li{width:102px;float:left;text-align:center;}
.demo img{margin-bottom:8px;}
3，js部分
复制代码 代码示例:
function startmarquee(lh,speed,delay,index){
var o=document.getElementById("demo"+index);
var o_td=o.getElementsByTagName("td")[0];
var str=o_td.innerHTML;
var newtd=document.createElement("td");
newtd.innerHTML=str;
o_td.parentNode.appendChild(newtd);
var t;
var p=false;
o.onmouseover=function(){p=true;}
o.onmouseout=function() {p=false;}
function start(){
t=setInterval(Marquee,speed);
if(!p){o.scrollLeft += 3;}
}
function Marquee(){
if(o_td.offsetWidth-o.scrollLeft<=0)
o.scrollLeft-=o_td.offsetWidth;
else{
if(o.scrollLeft%lh!=0){
o.scrollLeft+= 3
}else{clearInterval(t); setTimeout(start,delay);}
}
}
setTimeout(start,delay);
}
startmarquee(102,1,1500,1);//图片间停式滚动
startmarquee(102,30,1,2);//图片不间断滚动
测试：
在html文件加载完成，开始执行js代码，才能正常运行。
因此，记得将js放到div之后；图片滚动跟文字滚动实现原理上基本相同，有兴趣的朋友，可以研究下文字滚动效果的实现方法。
