用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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。