接觸前端也很久了，今天才發現，要做好一個輪播，其實有很多東西需要考慮進去，否則做出來的輪播效果並不好，下面我就來做一個輪播，是依賴jquery來寫的
1.要做輪播，首先需要的是HTML的內容，css的機構樣式，以下為html代碼：
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>
2.css 代碼如下：
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 }
3.輪播的關鍵在於js;
因為是依賴jquery的，所以先把jquery 傳進去,使用一個立即執行函數(注意，加+，減-，波浪線~，感嘆號！開始，或者使用小括號括起來，都是立即執行函數的寫法):主要有三個步驟，一是創建構造函數i(t,i), 二是改寫構造函數的原型對象，三是在jquery上擴展調用函數的方法,如下：
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 中也沒有，所以，這個也需要加上；這些是硬件方面的要求
5.完成上一點，已經有6 張圖片在網頁上了，那么就開始做輪播吧；要做輪播，首先要設置起始照片，設置第二張圖片開始，因為現在的第二張圖是原來的第一張圖片；然后設置定位問題，設置裝圖片的box 為絕對定位，這樣才好進行移動，然后設置 box 上一層的div為相對定位；為了使box內的圖片之間不留空隙，需要設置圖片img 為浮動，即左浮動；
6.因為要達到移動的效果，box上一層的div 設置一個寬度，超出寬度部分禁止顯示；然后設置圖片box的寬度為顯示div寬度的 6 倍，然后設置img圖片的寬度與顯示div的寬度相同，這樣，box 左右移動，就形成了img圖片左右移動的效果，當輪播從前到后移動到最后一個時，立即設置left 的值為 附 一個顯示寬度的值，當輪播從后到前，移動到第一個時，立即設置left 值為輪播長度負的輪播長度減二個顯示寬度，這樣，輪播就會立即顯示到第一張圖片或者最后一張圖片，給人的感覺就像是一直循環輪播移動一樣，這就是無縫輪播的原理
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);
以上，輪播圖完成了，支持窗口自適應；
不過有一點瑕疵，就是在窗口自適應的時候，個人感覺不太連續，目前還不知道問題出在哪里，有知道的大神請留言提示一下，謝謝；