图片从右向左循环滚动

最新推荐文章于 2024-04-05 14:46:33 发布

iteye_7108

最新推荐文章于 2024-04-05 14:46:33 发布

阅读量241

点赞数

分类专栏： html 文章标签：图片滚动

本文链接：https://blog.csdn.net/iteye_7108/article/details/82510417

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<head>
</head>
<body>
<div id="con_div" style="overflow:hidden; height:80px; width:420px; color:#ff0000; margin-left:15px;">
<table align="left" cellpadding="0" cellspace="0" border="0">
<tr>
<td id="td01" valign="top">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<a href="#"><img src="befor1.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>         
<td>
<a href="#"><img src="befor2.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor3.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor4.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>
<td>
<a href="#"><img src="befor1.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>         
<td>
<a href="#"><img src="befor2.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor3.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor4.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>
</tr>
</table>
</td>
<td id="td02" valign="top"></td>
</tr>
</table>
</div>
<script>
// 速度数值越大速度越慢
var speed=10;
td02.innerHTML=td01.innerHTML;
function Marquee()
{
    if(td02.offsetWidth-con_div.scrollLeft<=0)
{
    con_div.scrollLeft-=td01.offsetWidth;
}
else
{
    con_div.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
con_div.οnmοuseοver=function() {clearInterval(MyMar)}
con_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>