• 图片无缝滚动


    公司要实现一个客户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>

  • 相关阅读:
    c++中的 三/五原则
    3. 无重复字符的最长子串
    c++中的单例模式
    bfs 以及 dfs 常用解题思路
    经济学的三个问题
    gtihub 上一些值得学习的项目
    994. 腐烂的橘子
    96. 不同的二叉搜索树
    some idea
    Libco协程库
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3324885.html
Copyright © 2020-2023  润新知