快捷導(dǎo)航

js 實用的無間斷滾動圖效果(良好兼容性)

更新時間：2010年06月07日 22:31:26 作者：

網(wǎng)上有不少圖片滾動的效果代碼，但大多兼容性不好，或者結(jié)構(gòu)混亂，xhtml，css，js 均沒有得到良好的優(yōu)化。

下面介紹一個方法；基本上實現(xiàn)結(jié)構(gòu)跟行為相分離，兩者的聯(lián)系只需要一個
id就可以，使用起來很方便，而且同一個js代碼可以實現(xiàn)在本頁面多個滾動圖效果，之間互不干擾，
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

復(fù)制代碼代碼如下:

 
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

復(fù)制代碼代碼如下:

 
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);//圖片不間斷滾動 