用jquery实现图片左右自动循环滚动

最新推荐文章于 2021-03-25 09:20:45 发布

weixin_34351321

最新推荐文章于 2021-03-25 09:20:45 发布

阅读量2.1k

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/sunshinewyf/blog/529563

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近要实现一个项目的一个图片循环左右滚动的效果，做了好久也没有搞出来，不是不会，而是忽略了一个细节。

百度了好久，也没有看出来有什么不同，定时器啥的都定义好了，然而它就是不动，简直是碉堡了，之后仔细看，才发现我的ul的样式设置得有问题，原理上应该是外层div的宽度固定，并且overflow属性设置为hidden,然而这并不够，还要设置ul的宽度大于外层div的宽度

代码如下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>javascript test</title>
   <style type="text/css">
.picture{
   width:1030px;
   border:1px solid black;
   position: relative;
   height: 120px;
   margin: 10px auto 0;
   overflow: hidden;
}
.picture ul{
   position: relative;
   padding: 0;
   width: 3062px;
   margin:0;
}
.picture li{
   width: 162px;
   height: 100px;
   float: left;
   display: inline-block;
    margin:10px 9.4px 10px 0;
}
.picture li:first-child{
   margin-left: 0;
}
.picture li:last-child{
}
.picture li img{
   height: 100%;
   width: 100%;
   border:none;
}

   </style>
</head>
<body>
      <div id="picture">
          <ul id="area1">
               <li><img src="5.jpg" alt=""></li>
               <li><img src="6.jpg" alt=""></li>
               <li><img src="7.jpg" alt=""></li>
               <li><img src="8.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="2.jpg" alt=""></li>
               <li><img src="3.jpg" alt=""></li>
               <li><img src="2.jpg" alt=""></li>
               <li><img src="3.jpg" alt=""></li>
            </ul>
        </div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
      var speed = 10;
      var picture = $('#picture');
      var ul = $('ul',picture);
      var li = $('li',ul);
      ul.append(li.slice(0,6).clone()) ;
      alert(ul.width());
       var timer = setInterval(Marquee,speed);
       alert(picture.scrollLeft());

       picture.hover(function() {
                clearInterval(timer);
                },function(){
                //离开继续调用
                timer=setInterval(Marquee,speed);
                });
       function Marquee(){
              if(picture.scrollLeft()>= 1540){
                picture.scrollLeft(0);
            }
            else
            {
                picture.scrollLeft(picture.scrollLeft()+1);
            }
      }
     console.log(picture.scrollLeft());
</script>
</html>

这些jquery代码相信一般的人都能看懂，这里就不解释了，有一点很关键，就是为了展示循环的效果，需要将页面中的li追加到已有的li后面，还有就是这里我的js代码picture.scrollLeft()>= 1540中设置的是1540，其实这个值是随便设的，只要你达到你想要的效果就行，还是掌握的知识不够精细啊

转载于:https://my.oschina.net/sunshinewyf/blog/529563