zoukankan      html  css  js  c++  java
  • js原生实现 无缝滚动图片


    <!-- 无缝滚动图片开始 -->
    <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; HEIGHT: 170px">
    <table width="100%" border=0 align=center cellpadding=0 cellspacing="0" cellspace="0">
    <tr>
    <td valign=top id=demopic1><table width="100%" border="0" cellspacing="10" cellpadding="0">
    <tr>
    <td align="center"><a href="" target=_blank><img src="./images/W001.jpg" width="110" height="150" border="0" alt="法治新闻传播" /></a></td>

    <td align="center"><a href="" target=_blank><img src="./images/W002.jpg" width="110" height="150" border="0" alt="人民检察" /></a></td>

    <td align="center"><a href="" target=_blank><img src="./images/W003.jpg" width="110" height="150" border="0" alt="最高人民检察院影视中心" /></a></td>

    <td align="center"><a href="" target=_blank><img src="./images/W004.png" width="110" height="150" border="0" alt="政法网络舆情" /></a></td>

    <td align="center"><a href="" target=_blank><img src="./images/W005.jpg" width="110" height="150" border="0" alt="人民监督" /></a></td>

    <td align="center"><a href="" target=_blank><img src="./images/W006.jpg" width="110" height="150" border="0" alt="方圆律政" /></a></td>

    <td align="center"><a href="" target=_blank><img src="./images/W007.jpg" width="110" height="150" border="0" alt="方圆" /></a></td>
    </tr>
    </table></td>
    <td width="12" valign=top id=demopic2></td>
    </tr>
    </table>
    </div>


    <script>
    var speed=15
    demopic2.innerHTML=demopic1.innerHTML
    function Marquee()
    { if(demopic2.offsetWidth-demopic.scrollLeft<=0)
    demopic.scrollLeft-=demopic1.offsetWidth
    else{
    demopic.scrollLeft++
    }
    }
    var MyMar=setInterval(Marquee,speed)

    demopic.onmouseover=function() {
    clearInterval(MyMar)
    }

    demopic.onmouseout=function() {
    MyMar=setInterval(Marquee,speed)
    }
    </script>

    <!-- 无缝滚动图片结束 -->

  • 相关阅读:
    福大软工 · BETA 版冲刺前准备(团队)
    福大软工 · 第十一次作业
    Alpha 冲刺 (9/10)
    Alpha 冲刺 (8/10)
    Alpha 冲刺 (7/10)
    Alpha 冲刺 (6/10)
    Alpha 冲刺 (5/10)
    Alpha 冲刺 (4/10)
    福大软工1816 · 团队现场编程实战(抽奖系统)
    阿里八八β阶段Scrum(5/5)
  • 原文地址:https://www.cnblogs.com/yzryc/p/6046414.html
Copyright © 2011-2022 走看看