• 图片无缝滚动


    公司要实现一个客户LOGO图片滚动的效果,下面是实现的源码,分享一下

    <style>

    #outer {
        overflow: hidden;
    }
    img {
        height: 100p;
         130px;
    }
    ul {
        list-style: none
    }
    li {
        float: left;
    }
    #inner01, #inner02 {
        float: left;
    }
    </style>

    <script type="text/javascript" >
    $(function(){
        var outer = $("#outer");
        var inner01= $("#inner01");
        var inner02= $("#inner02");
        inner02.html(inner01.html());
        function que(){
            //alert(outer.scrollLeft() +" "+ inner01.width());
            if(outer.scrollLeft()>=inner01.width()){
                //alert(outer.scrollLeft() +" "+ inner01.width());
                outer.scrollLeft(0);
            }
            else{
                outer.scrollLeft(outer.scrollLeft()+1);
            }
            }
        setInterval(que,10);
    })
    </script>
    </head>

    <body>
    <div id="outer">
      <div style="33333px;">
        <div id="inner01">
          <ul>
            <li><img src="images/product_miniimg_01.png" /></li>
            <li><img src="images/product_miniimg_02.png" /></li>
            <li><img src="images/product_miniimg_03.png" /></li>
            <li><img src="images/product_miniimg_04.png" /></li>
            <li><img src="images/product_miniimg_05.png" /></li>       
          </ul>
        </div>
        <div id="inner02"> </div>
      </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    手机发送验证码—.net代码
    AJAX之XMLHttpRequest
    JQuery总结+实例
    ASP.NET总结——更改后
    css总结——position
    JavaScript的程序构成
    初识javascript
    asp总结
    北大青鸟代码---asp.net初学者宝典
    iOS常用技术-Label自适应
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3324885.html
Copyright © 2020-2023  润新知