首页 > 文章 > web前端 > js 实用的无间断滚动图效果(良好兼容性)_图象特效

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

WBOY原创: 2016-05-16 18:25:281188浏览

下面介绍一个方法；基本上实现结构跟行为相分离，两者的联系只需要一个
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"></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宽度的图片，可以在代码中修改，适合自己图片大小的宽度，才可以完美的运行。

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Array.prototype.slice 使用扩展_javascript技巧下一篇：js word表格动态添加代码_javascript技巧

相关文章

查看更多