<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<div id="demo" style="overflow: hidden; width: 322px; height: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tr align="center">
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
</tr>
</table></td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<div id="demo0" style="overflow: hidden; width: 322px; height: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="demo11" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tr align="center">
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
</tr>
</table></td>
<td id="demo22" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript" language="JavaScript">
//调用向左滚动
toleft("demo","demo1","demo2",30,"hehe123")
//调用向右滚动
toright("demo0","demo11","demo22",20,"hehe1123")
function $(id){return document.getElementById(id)}
//向左滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。
//by 柳永法(yongfa365)'Blog www.yongfa365.com
function toleft(demo,demo1,demo2,speed,flag){
demo=$(demo);demo1=$(demo1);demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth
}
else{
demo.scrollLeft++
}
}
flag=setInterval(Marquee,speed)
demo.οnmοuseοver=function(){clearInterval(flag);}
demo.οnmοuseοut=function(){flag=setInterval(Marquee,speed);}
}
//向右滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。
//by 柳永法(yongfa365)'Blog www.yongfa365.com
function toright(demo,demo1,demo2,speed,flag){
demo=$(demo);demo1=$(demo1);demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0){
demo.scrollLeft=demo2.offsetWidth
}
else{
demo.scrollLeft--
}
}
flag=setInterval(Marquee,speed)
demo.οnmοuseοver=function(){clearInterval(flag);}
demo.οnmοuseοut=function(){flag=setInterval(Marquee,speed);}
}
</script>
</body>
</html>
经典的从左往右的滚动的代码建议Ie 和火狐
最新推荐文章于 2024-08-27 13:38:21 发布
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
