图片循环滚动

最新推荐文章于 2024-04-30 13:13:02 发布

sky水牛

最新推荐文章于 2024-04-30 13:13:02 发布

阅读量290

点赞数

分类专栏：网页制作

本文链接：https://blog.csdn.net/xbruin/article/details/9233351

版权

网页制作专栏收录该内容

18 篇文章 0 订阅

订阅专栏

从右向左

<div id="demo" style="overflow:hidden;width:680px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
<td><a href="#" target=_blank><img src="images/sl_1.jpg" width="65" height="90" hspace="5" vspace="6" border="0" /></a></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
   <script>
   var speed=1//速度数值越大速度越慢
   demo2.innerHTML=demo1.innerHTML
   function Marquee(){
   if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
   else{
   demo.scrollLeft++
   }
   }
   var MyMar=setInterval(Marquee,speed)
   demo.οnmοuseοver=function() {clearInterval(MyMar)}
   demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
   </script>

从左向右

   var speed=2//速度数值越大速度越慢
   demo2.innerHTML=demo1.innerHTML
   function Marquee(){
   if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
   else{
   demo.scrollLeft++
   }
   }
   var MyMar=setInterval(Marquee,speed)
   demo.οnmοuseοver=function() {clearInterval(MyMar)}
   demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
   </script>