jQuery實現輪播圖

時間 2019-11-19

標籤 jquery 實現欄目 JQuery 简体版

原文原文鏈接

本篇文章主要講述經過jQuery來定義輪播圖相對原生js來講代碼量減小了不少得益於jQuery強大的選擇器javascript

下一篇文章將經過原生js對輪播圖進行解析css

功能說明:
1. 點擊向右(左)的圖標, 平滑切換到下(上)一頁
2. 無限循環切換: 第一頁的上一頁爲最後頁, 最後一頁的下一頁是第一頁
3. 每隔3s自動滑動到下一頁
4. 當鼠標進入圖片區域時, 自動切換中止, 當鼠標離開後,又開始自動切換
5. 切換頁面時, 下面的圓點也同步更新
6. 點擊圓點圖標切換到對應的頁java

bug: 快速點擊時, 翻頁不正常jquery

附上最終效果圖app

注意：這裏的bug並不是取消定時器就能夠解決而是須要設置一個狀態來直觀的表現此時是正在輪播this

　　　若是是則直接退出若是不是則繼續進行以上在代碼區域會着重寫出spa

bug示意圖code

如下爲HTML代碼blog

 1 <div id="container">
 2   <div id="list" style="left: -600px;">
 3     <img src="img/5.jpg" alt="5"/>
 4     <img src="img/1.jpg" alt="1"/>
 5     <img src="img/2.jpg" alt="2"/>
 6     <img src="img/3.jpg" alt="3"/>
 7     <img src="img/4.jpg" alt="4"/>
 8     <img src="img/5.jpg" alt="5"/>
 9     <img src="img/1.jpg" alt="1"/>
10   </div>
11   <div id="pointsDiv">
12     <span index="1" class="on"></span>
13     <span index="2"></span>
14     <span index="3"></span>
15     <span index="4"></span>
16     <span index="5"></span>
17   </div>
18   <a href="javascript:;" id="prev" class="arrow">&lt;</a>
19   <a href="javascript:;" id="next" class="arrow">&gt;</a>
20 </div>
21 <script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
22 <script type="text/javascript" src="app.js"></script>

如下爲css代碼圖片

  1 <style type="text/css">
  2     /*去除內邊距,沒有連接下劃線*/
  3     * {
  4       margin: 0;
  5       padding: 0;
  6       text-decoration: none;
  7     }
  8 
  9     /*讓<body有20px的內邊距*/
 10     body {
 11       padding: 20px;
 12     }
 13 
 14     /*最外圍的div*/
 15     #container {
 16       width: 600px;
 17       height: 400px;
 18       overflow: hidden;
 19       position: relative; /*相對定位*/
 20       margin: 0 auto;
 21     }
 22 
 23     /*包含全部圖片的<div>*/
 24 
 25     #list {
 26       width: 4200px; /*7張圖片的寬: 7*600 */
 27       height: 400px;
 28       position: absolute; /*絕對定位*/
 29       z-index: 1;
 30 
 31     }
 32 
 33     /*全部的圖片<img>*/
 34     #list img {
 35       float: left; /*浮在左側*/
 36     }
 37 
 38     /*包含全部圓點按鈕的<div>*/
 39     #pointsDiv {
 40       position: absolute;
 41       height: 10px;
 42       width: 100px;
 43       z-index: 2;
 44       bottom: 20px;
 45       left: 250px;
 46     }
 47 
 48     /*全部的圓點<span>*/
 49 
 50     #pointsDiv span {
 51       cursor: pointer;
 52       float: left;
 53       border: 1px solid #fff;
 54       width: 10px;
 55       height: 10px;
 56       border-radius: 50%;
 57       background: #333;
 58       margin-right: 5px;
 59     }
 60 
 61     /*第一個<span>*/
 62 
 63     #pointsDiv .on {
 64       background: orangered;
 65     }
 66 
 67     /*切換圖標<a>*/
 68 
 69     .arrow {
 70       cursor: pointer;
 71       display: none;
 72       line-height: 39px;
 73       text-align: center;
 74       font-size: 36px;
 75       font-weight: bold;
 76       width: 40px;
 77       height: 40px;
 78       position: absolute;
 79       z-index: 2;
 80       top: 180px;
 81       background-color: RGBA(0, 0, 0, 0.3);
 82       color: #fff;
 83     }
 84 
 85     /*鼠標移到切換圖標上時*/
 86     .arrow:hover {
 87       background-color: RGBA(0, 0, 0, 0.7);
 88     }
 89 
 90     /*鼠標移到整個div區域時*/
 91     #container:hover .arrow {
 92       display: block; /*顯示*/
 93     }
 94 
 95     /*上一個切換圖標的左外邊距*/
 96     #prev {
 97       left: 20px;
 98     }
 99 
100     /*下一個切換圖標的右外邊距*/
101     #next {
102       right: 20px;
103     }
104   </style>

如下爲JavaScript代碼

  1 $(function () {
  2  
  3   var $container=$("#container")
  4   var $list=$("#list")
  5   var $points=$('#pointsDiv>span')
  6   var $prev=$('#prev')
  7   var $next=$('#next')
  8 
  9   var PAGE_WIDTH = 600 //一頁的寬度
 10   var time=400 //總時間
 11   var ITEM_TIME=20
 12   // var TIME = 400 // 翻頁的持續時間
 13   // var ITEM_TIME = 20 // 單元移動的間隔時間
 14   var imgCount = $points.length
 15   var index = 0 //當前下標
 16    var moving = false // 標識是否正在翻頁(默認沒有)
 17 
 18   $prev.click(function () {
 19     // 平滑翻到下一頁
 20     nextPage(false)
 21   })
 22 
 23   $next.click(function () {
 24     // 平滑翻到下一頁
 25     nextPage(true)
 26   })
 27   //3. 每隔3s自動滑動到下一頁
 28   var timer=setInterval(function () {
 29     nextPage(true)
 30   },3000)
 31 
 32   // 4. 當鼠標進入圖片區域時, 自動切換中止, 當鼠標離開後,又開始自動切換
 33 
 34   $container.hover(function () {
 35     clearInterval(timer)
 36   },function () {
 37     timer=setInterval(function () {
 38       nextPage(true)
 39     },3000)
 40   })
 41 
 42 
 43   //6. 點擊圓點圖標切換到對應的頁
 44   $points.click(function () {
 45     var targetIndex=$(this).index()
 46     if(targetIndex!=index){
 47       nextPage(targetIndex)
 48     }
 49   })
 50   
 51   
 52   //next能夠傳true  false
 53   //next傳數字  則須要判斷
 54   function  nextPage (next) {
 55     // if(moving){
 56     //   return
 57     // }
 58     // // 7.若是此時正在翻頁 直接返回 後面均不執行
 59     // moving=true  //此時正在翻頁
 60     var currentLeft=$list.position().left  //這個left可能取到移動一半時候的值
 61     var offset=0
 62     if(typeof next==="boolean"){
 63        offset=next ? -PAGE_WIDTH:PAGE_WIDTH  //總長度
 64     }else{
 65        offset=-(next-index) * PAGE_WIDTH
 66     }
 67 
 68    // $list.css('left' ,offset+currentLeft)
 69     //計算目標left
 70     var targetleft=currentLeft+offset
 71 
 72     var itemdistance=offset/(time/ITEM_TIME) //單位移動距離
 73     var timer=setInterval(function () {
 74       currentLeft += itemdistance
 75 
 76 
 77       if(currentLeft===targetleft) {
 78         clearInterval(timer)
 79 
 80         moving = false   //此時翻頁結束
 81 
 82 
 83         //2.  若是到達了最右邊的圖片(1.jpg), 跳轉到最左邊的第2張圖片(1.jpg)
 84         if (currentLeft === -(imgCount + 1) * PAGE_WIDTH) {
 85           currentLeft = -PAGE_WIDTH
 86         }
 87         else if (currentLeft === 0) {
 88           // 若是到達了最左邊的圖片(5.jpg), 跳轉到最右邊的第2張圖片(5.jpg)
 89           currentLeft = -imgCount * PAGE_WIDTH
 90         }
 91 
 92       }
 93       $list.css('left' ,currentLeft)
 94     },ITEM_TIME)
 95 
 96     //5. 切換頁面時, 下面的圓點也同步更新
 97     updaPoints(next) //更新圓點
 98   }
 99   
100 function updaPoints (next) {
101   var currentIndex = 0
102   if(typeof next==="boolean"){
103     if (next)
104     {
105       currentIndex = index + 1
106       if (currentIndex === imgCount) {// 此時看到的是1.jpg-->第1個圓點
107         currentIndex = 0
108       }
109     }else {
110       currentIndex = index - 1
111       if (currentIndex === -1) { // 此時看到的是5.jpg-->第5個圓點
112         currentIndex = imgCount - 1
113       }
114     }
115 
116   }else{
117     currentIndex=next
118   }
119 
120 
121   // 將當前index的<span>的class移除
122   // $points.eq(index).removeClass('on')
123   $points[index].className = ''
124   // 給目標圓點添加class='on'
125   // $points.eq(currentIndex).addClass('on')
126   $points[currentIndex].className = 'on'
127 
128   // 將index更新爲currentIndex
129   index = currentIndex
130 }
131 })

相關標籤/搜索

每日一句

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