js 实用的无间断滚动图效果(良好兼容性)_图象特效

下面介绍一个方法；基本上实现结构跟行为相分离，两者的联系只需要一个
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.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);//图片不间断滚动

测试代码：js需要在html文件加载完成后执行，才能正常运行，所以记得将js放到div之后；图片滚动跟文字滚动实现原理上大同小异。
演示代码:

<style type="text/css"><!-- ul, li, img, td { margin:0; padding:0; font-size:12px; list-style-type:none; text-align:center; } .demo { width:230px; margin-bottom: 8px; height: 172px; overflow: hidden; } .demo ul { width:408px; clear:both; }/*102*4=408px等于实际内容的总宽度*/ .demo li { width:102px; float:left; text-align:center; } .demo img { margin-bottom:8px; } --></style> <div class="demo" id="demo1"> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <ul> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <ul> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图1</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图2</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图3</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图4</li> </ul> </td> </tr> </tbody> </table>滚动图1</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><script type="text/javascript" language="JavaScript">// <![CDATA[ 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); // ]]></script>滚动图2</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" >滚动图3</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" >滚动图4</li> </ul> </td> </tr> </tbody> </table> </div> <div class="demo" id="demo2"> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <ul> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图1</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图2</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图3</li> <li> <img src="http://www.jb51.net/img.jpg" alt="js 实用的无间断滚动图效果(良好兼容性)_图象特效" ><br>滚动图4</li> </ul> </td> </tr> </tbody> </table> </div>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行

]
代码中，是针对102宽度的图片，可以在代码中修改，适合自己图片大小的宽度，才可以完美的运行。