图片无缝滚动-CSDN博客

本文链接：https://blog.csdn.net/mixiuali/article/details/11730191

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

<style>

#outer {
   overflow: hidden;
}
img {
   height: 100p;
   width: 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="width: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>

效果见 http://www.uuspeed.com