下面介绍一个方法；基本上实现结构跟行为相分离，两者的联系只需要一个
id就可以，使用起来很方便，而且同一个js代码可以实现在本页面多个滚动图效果，之间互不干扰，
1.xhtml
复制代码 代码如下:
滚动图1
滚动图2
滚动图3
滚动图4
滚动图1
滚动图2
滚动图3
滚动图4
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.scrolllefto.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);//图片不间断滚动
测试代码：js需要在html文件加载完成后执行，才能正常运行，所以记得将js放到div之后；图片滚动跟文字滚动实现原理上大同小异。
演示代码:
滚动图1
滚动图2
滚动图3
滚动图4
滚动图1
滚动图2
滚动图3
滚动图4
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
代码中，是针对102宽度的图片，可以在代码中修改，适合自己图片大小的宽度，才可以完美的运行。