图片无缝滚动

最新推荐文章于 2024-08-24 16:38:53 发布

原创最新推荐文章于 2024-08-24 16:38:53 发布 · 936 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #图片滚动

前端/移动开发专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现客户Logo图片滚动显示的方法。通过设置内外层div和图片样式，配合JavaScript定时器逐步移动外层div的水平滚动位置来达到连续滚动的效果。此外还复制了内层div的内容确保滚动过程流畅。

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