記一個jquery 無縫輪播的製做方法

時間 2020-05-07

原文原文鏈接

接觸前端也好久了，今天才發現，要作好一個輪播，其實有不少東西須要考慮進去，不然作出來的輪播效果並很差，下面我就來作一個輪播，是依賴jquery來寫的javascript

1.要作輪播，首先須要的是HTML的內容，css的機構樣式，如下爲html代碼：css

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <link rel="stylesheet" href="./ft-carousel.css" />
 7     <script src="./jquery-3.3.1.min.js"></script>
 8     <script src="./ft-carousel.min.js"></script>
 9     <style>
10     </style>
11 </head>
12 
13 <body>
14 
15     <div class="example">
16         <div class="ft-carousel" id="carousel_1">
17             <ul class="carousel-inner">
18                 <li class="carousel-item">
19                     <img src="img/a1.jpg" />
20                 </li>
21                 <li class="carousel-item">
22                     <img src="img/a2.jpg" />
23                 </li>
24                 <li class="carousel-item">
25                     <img src="img/a3.jpg" />
26                 </li>
27                 <li class="carousel-item">
28                     <img src="img/a4.jpg" />
29                 </li>
30 
31             </ul>
32         </div>
33     </div>
34     <script type="text/javascript">
35  $("#carousel_1").FtCarousel(); 36     </script>
37 
38 </body>
39 
40 </html>

View Code

2.css 代碼以下：html

 1 ul,  2 ol,  3 li,  4 div {  5  margin: 0;  6  padding: 0;  7 }  8 
 9 * {  10  margin: 0;  11  padding: 0;  12 }  13 
 14 ul,  15 ol {  16  list-style: none;  17 }  18 
 19 .ft-carousel {  20  position: relative;  21  width: 100%;  22  height: 700px;  23  overflow: hidden;  24 }  25 
 26 .ft-carousel .carousel-inner {  27  position: absolute;  28  left: 0;  29  top: 0;  30  height: 100%;  31 }  32 
 33 .ft-carousel .carousel-inner .carousel-item {  34  float: left;  35  height: 100%;  36 }  37 
 38 .ft-carousel .carousel-item img {  39  width: 100%;  40 }  41 
 42 .ft-carousel .carousel-indicators {  43  position: absolute;  44  left: 0;  45  bottom: 10px;  46  width: 100%;  47  text-align: center;  48  font-size: 0;  49 }  50 
 51 .ft-carousel .carousel-indicators span {  52  display: inline-block;  53  width: 12px;  54  height: 12px;  55  background-color: #fff;  56  margin: 0 4px;  57  border-radius: 50%;  58  cursor: pointer;  59 }  60 
 61 .ft-carousel .carousel-indicators span.active {  62  background-color: #de3a3a;  63 }  64 
 65 .ft-carousel .carousel-btn {  66  position: absolute;  67  top: 50%;  68  width: 50px;  69  height: 45px;  70  margin-top: -25px;  71  cursor: pointer;  72 }  73 
 74 .ft-carousel .carousel-prev-btn {  75  left: 0;  76  background: url(./img/prev.png) no-repeat;  77 }  78 
 79 .ft-carousel .carousel-next-btn {  80  right: 0;  81  background: url(./img/next.png) no-repeat;  82 }  83 
 84 body {  85  margin: 0;  86  font-family: "微軟雅黑";  87  background-color: #1F1F1F;  88 }  89 
 90 .example {  91  width: 100%;  92  font-size: 40px;  93  text-align: center;  94  margin: 20px auto;  95  background-color: #464576;  96 }  97 
 98 .carousel-item {  99  line-height: 336px; 100  color: #fff; 101  font-family: Arial Black 102 }

View Code

3.輪播的關鍵在於js;前端

由於是依賴jquery的，因此先把jquery 傳進去,使用一個當即執行函數(注意，加+，減-，波浪線~，感嘆號！開始，或者使用小括號括起來，都是當即執行函數的寫法):主要有三個步驟，一是建立構造函數i(t,i), 二是改寫構造函數的原型對象，三是在jquery上擴展調用函數的方法,以下：java

 1 ~ function (t) {  2  // 建立構造函數  3  function i(t, i) {  4  this.init(t, i);  5  };  6  // 改寫構造函數的原型對象  7  i.prototype = {  8 
 9  }; 10  // 在jquery 上擴展FtCarousel函數 11  t.fn.FtCarousel = function (n) { 12  return this.each(function () { 13  new i(t(this), n); 14  }); 15  }; 16 }(jQuery);

4.咱們要作的是一個無縫輪播，可是在HTML中，咱們只有4 張圖片，二製做無縫輪播須要使用（要輪播的圖片數量 + 2 )張圖片，因此在作輪播以前，咱們須要先加上另外的兩張圖片，複製第一張圖片放到最後一張圖片的位置，複製最後一張圖片放到第一張圖片的位置，這是一個；而後，在輪播中須要控制輪播上一頁下一頁的按鈕，這在html 中也沒有寫，因此這也須要加上；在控制輪播的時候，我須要直接跳到某一張圖片，這也須要一個輪播序號的按鈕，在HTML 中也沒有，因此，這個也須要加上；這些是硬件方面的要求jquery

5.完成上一點，已經有6 張圖片在網頁上了，那麼就開始作輪播吧；要作輪播，首先要設置起始照片，設置第二張圖片開始，由於如今的第二張圖是原來的第一張圖片；而後設置定位問題，設置裝圖片的box 爲絕對定位，這樣纔好進行移動，而後設置 box 上一層的div爲相對定位；爲了使box內的圖片之間不留空隙，須要設置圖片img 爲浮動，即左浮動；app

6.由於要達到移動的效果，box上一層的div 設置一個寬度，超出寬度部分禁止顯示；而後設置圖片box的寬度爲顯示div寬度的 6 倍，而後設置img圖片的寬度與顯示div的寬度相同，這樣，box 左右移動，就造成了img圖片左右移動的效果，當輪播從前到後移動到最後一個時，當即設置left 的值爲附一個顯示寬度的值，當輪播從後到前，移動到第一個時，當即設置left 值爲輪播長度負的輪播長度減二個顯示寬度，這樣，輪播就會當即顯示到第一張圖片或者最後一張圖片，給人的感受就像是一直循環輪播移動同樣，這就是無縫輪播的原理ide

7. 下面來完成第3個步驟中沒有完成的部分：不構造函數的原型對象繼續寫完；原型對象上的函數，new 出來的對象是能夠直接調用的；函數

 1 ~ function (t) {  2     // 建立構造函數
 3     function i(t, i) {  4         this.init(t, i);  5  };  6     // 改寫構造函數的原型對象
 7     i.prototype = {  8             // 函數初始化
 9             // 在這裏括號中的i 爲傳入的須要進行輪播移動的對象
 10             init: function (i, n) {  11                 // 把ele屬性設置到調用函數上，設置ele的值爲須要進行輪播的對象
 12                 this.ele = i,  13                     // 添加一個opts 對象擴展到jquery 對象上，在這裏t 爲外部傳入的jquery 對象，對象上有index /auto/time/indecators/button 等參數 
 14                     this.opts = t.extend({}, {  15                         index: 0,  16                         auto: !0,  17                         time: 3e3,  18                         indicators: !0,  19                         buttons: !0,  20                         oresize: true
 21  }, n),  22                     // 在構造函數上添加index 屬性，this.index 的屬性值爲 this.opts 對象上的index屬性值，把opts 對象上的屬性值賦值給this對象上的index 值
 23                     this.index = this.opts.index,  24                     // 在執行初始化函數時，執行如下幾個方法：render,eventBind,loop,resize
 25                     this.render(),  26                     this.eventBind(),  27                     this.opts.auto && this.loop(),  28                     this.opts.oresize && this.resize()  29  },  30             render: function () {  31                 this.renCas();  32                 this.opts.indicators && this.renIns();  33                 this.opts.buttons && this.renBtns();  34  },  35             renCas: function () {  36                 var t = this.ele.find(".carousel-inner"),  37                     i = t.find(".carousel-item"),  38                     n = i.length,  39                     e = i.eq(n - 1).clone(),  40                     s = i.eq(0).clone(),  41                     o = this.ele.width(), ///獲取輪播框的寬度
 42                     startW = 1863,  43                     startH = 700;  44                 this.ele.height(parseInt(o * startH / startW)),  45                     // this.index 表示獲取當前顯示的輪播圖圖片的索引值， 
 46                     this.index = this.index < 1 || this.index > (n + 2 - 2) ? 1 : this.index,  47                     t.width((n + 2) * o).prepend(e).append(s).css("left", (this.index) * -o),  48                     t.find(".carousel-item").width(o);  49  },  50             renIns: function () {  51                 for (var t = this.ele.find(".carousel-item").length - 2, i = '<div class="carousel-indicators">', n = 0; n < t; n++) i += '<span data-index="' + n + '"></span>';  52                 i += "</div>",  53                     this.ele.append(i).find(".carousel-indicators span").eq(this.index - 1).addClass("active")  54  },  55             renBtns: function () {  56                 this.ele.append('<span class="carousel-btn carousel-prev-btn"></span><span class="carousel-btn carousel-next-btn"></span>')  57  },  58             // 在這裏，要把 t 改成 index
 59             // 這裏傳入參數，傳入1 未左右，傳入-1 爲右移，
 60             // 移動時，如此設置 tarLeft = -(this.index+t)*e;
 61             animate: function (t) {  62                 if (this.ele.find(".carousel-inner").is(":animated")) return;  63                 var i = this,  64                     n = this.ele.find(".carousel-inner"),  65                     e = this.ele.width(),  66                     s = n.find(".carousel-item").length;  67                 var tarLeft = -(this.index + t) * e + 'px';  68                 n.stop(true, !0).animate({  69  left: tarLeft,  70                 }, 1000, function () {  71                     i.index = i.index + t,  72                         i.index > (s - 2) && (i.index = 1) && n.css("left", -e * i.index + 'px'),  73                         i.index < 1 && (i.index = s - 2) && n.css("left", -e * i.index + 'px'),  74                         i.opts.buttons && i.showBtn();  75  });  76  },  77             showBtn: function () {  78                 this.ele.find(".carousel-indicators span").removeClass("active").eq(this.index - 1).addClass("active")  79  },  80             loop: function () {  81  clearInterval(i.timer);  82                 var t = this.ele.find(".carousel-next-btn");  83                 this.timer = setInterval(function () {  84                     t.trigger("click")  85                 }, this.opts.time)  86  },  87             eventBind: function () {  88                 var i = this,  89                     n = this.ele.find(".carousel-prev-btn"),  90                     e = this.ele.find(".carousel-next-btn"),  91                     s = this.ele.find(".carousel-indicators"),  92                     o = this.ele.width(),  93                     a = this.opts.auto;  94                 var that = this;  95 
 96                 e.on("click", function () {  97                     i.animate(1)  98                 }), n.on("click", function () {  99                     i.animate(-1) 100                 }), s.on("click", "span", function () { 101                     var curindex = i.ele.find(".carousel-indicators span.active").attr("data-index"); 102                     var tarindex = $(this).attr("data-index"); 103                     var tarmove = tarindex - curindex; 104  i.animate(tarmove); 105                 }), a && this.ele.hover(function () { 106  clearInterval(i.timer) 107                 }, function () { 108  i.loop() 109  }); 110  }, 111             resize: function () { 112                 var i = this, 113                     startW = 1863, 114                     startH = 700; 115                 $(window).on('resize', function () { 116                     o = i.ele.width(), 117                         t = i.ele.find(".carousel-inner"), 118                         limg = t.find(".carousel-item"), 119                         s = t.find(".carousel-item").length; 120                     //設置寬
121                     t.width(o * s), limg.width(o); 122                     var Oheight = parseInt(o * startH / startW); 123  i.ele.height(Oheight) 124  }); 125  }, 126  }, 127         // 在jquery 上擴展FtCarousel函數
128         t.fn.FtCarousel = function (n) { 129             return this.each(function () { 130                 new i(t(this), n); 131  }); 132  }; 133 
134 }(jQuery);

以上，輪播圖完成了，支持窗口自適應；oop

不過有一點瑕疵，就是在窗口自適應的時候，我的感受不太連續，目前還不知道問題出在哪裏，有知道的大神請留言提示一下，謝謝；

相關標籤/搜索

每日一句

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