您的位置：首页 > Web前端 > JavaScript

js图片滑动

2010-02-26 12:00 274 查看
<html>
<head>
<title>图片滚动</title>
</head>
<body>
<div id="marquee_demo" style="overflow:hidden;width:100%;text-align:center;border:1px solid #0066cc">
<table cellspacing="0" cellpadding="3" align="center" border="0">
<tr>
<td id="marquee_product1" valign="top">
<table width="100%" height="100" border="0" cellpadding="2" cellspacing="0">
<tr>
<td><a href="http://www.codefans.net"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" border=0></a></td>
<td><a href="/"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" border=0></a></td>
<td><a href="/"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" border=0></a></td>
<td><a href="/"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" border=0></a></td>
<td><a href="http://www.codefans.net"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" border=0></a></td>
<td><a href="/"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" border=0></a></td>
<td><a href="/"><img src="http://www.codefans.net/jscss/demoimg/wall_s7.jpg" border=0></a></td>
<td><a href="http://www.codefans.net"><img src="http://www.codefans.net/jscss/demoimg/wall_s8.jpg" border=0></a></td>
<td><a href="/"><img src="http://www.codefans.net/jscss/demoimg/wall_s9.jpg" border=0></a></td>
</tr>
</table>
</td>
<td id="marquee_product2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=30;
marquee_product2.innerHTML=marquee_product1.innerHTML;
function Marquee(){
if(marquee_demo.scrollLeft>=marquee_product1.scrollWidth){
marquee_demo.scrollLeft=0;
}
else{
marquee_demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
marquee_demo.onmouseover=function(){clearInterval(MyMar);}
marquee_demo.onmouseout=function(){MyMar=setInterval(Marquee,speed);}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航