软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：无间断,滚动图

<style type="text/css"></style> 
<div class="demo" id="demo1"> 
<table cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 
<td> 
<ul> 
<li><img src="http://www.jb51.net/img.jpg" /><br>滚动图1</li> 
<li><img src="http://www.jb51.net/img.jpg" /><br>滚动图2</li> 
<li><img src="http://www.jb51.net/img.jpg" /><br>滚动图3</li> 
<li><img src="http://www.jb51.net/img.jpg" /><br>滚动图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" /><br>滚动图1</li> 
<li><img src="http://www.jb51.net/img.jpg" /><br>滚动图2</li> 
<li><img src="http://www.jb51.net/img.jpg" /><br>滚动图3</li> 
<li><img src="http://www.jb51.net/img.jpg" /><br>滚动图4</li> 
</ul> 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
<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>

技术文章快速查找

JSON+HTML实现国家省市联动选择效果

详解JavaScript中Object对象用法

jquery 使用简明教程

js退出弹窗代码集合

jQuery获得内容和属性示例代码

JavaScript 学习笔记（十五）

jQuery第三课修改元素属性及内容的代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建