管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　下面介绍一个方法；基本上实现结构跟行为相分离，两者的联系只需要一个

　　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);//图片不间断滚动

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

　　演示代码:

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

教程首页 更多教程