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

时间 2019-11-07

原文原文链接

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

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

代码以下：html

<!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>java

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