zoukankan      html  css  js  c++  java
  • jquery 实现图片无缝向左滚动

     <script type="text/javascript" src="_pub/Script/jquery.js"></script>

     <script type="text/javascript">

    $(function () {
    var demo = $("#demo");
    var demo1 = $("#demo1");
    var demo2 = $("#demo2");
    demo2.html(demo1.html());
    function Marquee() {
    //无缝向左滚动
    if (demo.scrollLeft() > demo1.width()) {
    demo.scrollLeft(0);
    } else {
    demo.scrollLeft(demo.scrollLeft() + 1);

    }

    }
    var speed = 20;
    var myMar = setInterval(Marquee, speed);

    demo.mouseover(function () {
    clearInterval(myMar);
    });

    demo.mouseout(function () {
    myMar = setInterval(Marquee, speed);
    });

    })

    </script>

    <div id="demo" style="overflow:hidden;1280px;" >

    <table style="border:1px;flex-align:center;" cellpadding="1" cellspacing="1">
    <tr>
    <td id="demo1" valign="top" bgcolor="ffffff">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr align="center">
    <td><img src="skin/images2/1.png" width="265" height="163" alt="图"/></td>   这几张图的总宽度大于1280px;才能在循环2次之后继续滚动
    <td><img src="skin/images2/2.png" width="265" height="163" alt="图"/></td>
    <td><img src="skin/images2/3.png" width="265" height="163" alt="图"/></td>
    <td><img src="skin/images2/4.png" width="265" height="163" alt="图"/></td>
    <td><img src="skin/images2/5.png" width="265" height="163" alt="图"/></td>

    </tr>
    </table>
    </td>
    <td id="demo2" valign="top"></td>
    </tr>
    </table>


    </div>

    每天进步一点点
  • 相关阅读:
    费用流入门
    网络最大流入门
    假期编程
    假期编程
    假期编程
    假期编程
    假期编程
    假期编程
    假期编程
    假期编程
  • 原文地址:https://www.cnblogs.com/miraclesakura/p/3896739.html
Copyright © 2011-2022 走看看