不间断滚动图片代码

最新推荐文章于 2021-06-05 02:23:54 发布

转载最新推荐文章于 2021-06-05 02:23:54 发布 · 130 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/cai9911/archive/2007/01/11/617844.html

本文详细介绍了一种使用HTML和JavaScript实现的滚动图片效果，通过动态调整元素的位置，可以在页面上连续展示多个图片，同时提供鼠标悬停停止滚动的功能，适用于网站广告轮播或产品展示等场景。

<table width=730 border=0 align="center" cellpadding=0 cellspacing=0>
    <tr>
    <td>
      <div id=demo style="overflow:hidden;height:100px;width:730px;color:#666666">
       <table align=left cellpadding=0 cellspace=0 border=0>
        <tr>
        <td id=demo1 valign=top>
         <table border=0 cellpadding=0 cellspacing=0>
         <tr>
        <td><a href=# target=_blank><img src="images/adv/fj001.jpg" width=86 height=86 border="0"></a><br>
           <center>说明一</center></td>
          <td width="6"> </td>
          <td><a href=# target=_blank><img src="images/adv/fj002.jpg" width=86 height=86 border="0"></a><br>
           <center>说明二</center></td>
          <td width="6"> </td>
          <td><a href=# target=_blank><img src="images/adv/fj003.jpg" width=86 height=86 border="0"></a><br>
           <center>说明三</center></td>
         <td width=6> </td>
          <td><a href=# target=_blank><img src="images/adv/fj004.jpg" width=86 height=86 border="0"></a><br>
           <center>说明四</center></td>
          <td width=6> </td>
          <td><a href=# target=_blank><img src="images/adv/fj005.jpg" width=86 height=86 border="0"></a><br>
           <center>说明五</center></td>
         <td width=6> </td>
         <td><a href=# target=_blank><img src="images/adv/fj006.jpg" width=86 height=86 border="0"></a><br>
           <center>说明六</center></td>
         <td width=6> </td>
         <td><a href=# target=_blank><img src="images/adv/fj007.jpg" width=86 height=86 border="0"></a><br>
           <center>说明七</center></td>
         <td width=6> </td>
         <td><a href=# target=_blank><img src="images/adv/fj008.jpg" width=86 height=86 border="0"></a><br>
           <center>说明八</center></td>
         </tr>
       </table>
       </td>
       <td id=demo2 valign=top></td>
       </tr>
       </table>
      </div>
     </td>
     </tr>
    </table>
     <script>
     var speed=20//速度数值越大速度越慢
     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.onmouseover=function() {clearInterval(MyMar)}
     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
     </script>

转载于:https://www.cnblogs.com/cai9911/archive/2007/01/11/617844.html