插件實現：（id=swiper名的父級防止相同樣式覆蓋）

輪播圖顯示區域作為對象調用插件 ,$('#swiper')

圖片路徑不相同，圖片數量不同arr.length（索引為length-1）

尺寸不同（width，height）

父級不同（wrapper）

立即執行函數

父級容錯（沒用wrap

$.fn.extend({ sliderShow: function (opstions) { var opts = opstions; opts.father = this || $('body') new Swiper(opts);}})

extend實現插件擴展的原理，從extend的源碼可以看出，當我們傳入僅有一個對象時，他會把對象跟jQuer對象本身合并，使得在jQuery身上多出了我們傳入的對象上的方法，這樣一個過程，就是我們擴展插件的原理；

對象里面有個sliderShow方法，將會合并到 jquer.prototype上實現實例化調用

function Swiper(opts) {this.opts = opts || {} //兼容一下，沒有傳對象進來也是undefined不會報錯；this.wrap = this.opts.father; //保存一下wrap，也就是誰調用，這個wrap就是誰；this.init(); //入口函數； } //上方this.init()調用，這里面的所有this指向的還是new出來的那個對象；就相當于添加了一些變量跟方法； Swiper.prototype.init = function () { this.nowIndex = 0; //設定初始索引值this.timer = undefined; //定義定時器的屬性名this.flag = true; //鎖功能this.len = this.opts.image.length; //獲取圖片數量;this.itemWidth = this.wrap.width(); //通過父級寬度決定圖片所需寬度以及位移所需寬度this.itemHeight = this.wrap.height(); this.image = this.opts.image; //保存一下image圖片數組；this.createDom(); //創建dom結構！這樣執行Swiper會在自己身上找不到這個方法，而后上原型上面找；this.bindEvent(); //綁定點擊事件；this.sliderAuto(); //開啟自動輪播； } //dom結構的創建 Swiper.prototype.createDom = function () {var len = this.len;var str = " ";var listStr = " ";var imgBox = $('<ul class = "img-box"></ul>'); //創建圖片的ulvar list = $('<ul class="list"></ul>'); //創建索引點ul；var btn = '<div class="btn prev"></div><div class="btn next"></div>' //通過for循環，字符串拼接的方法創建圖片dom結構；for (var i = 0; i < len; i++) {str += "<li><a><img src=" + this.image[i] + ' alt=""></a></li>'; listStr += '<li></li>'; }//重新創第一張圖，也就是最后一張過度圖片；str += "<li><a><img src=" + this.image[0] + ' alt=""></a></li>' this.wrap.append(imgBox.html(str)).append($(btn)).append(list.append($(listStr)));//鏈式的將創建出來的dom元素插入整個wrap,也就是誰調用，就插到哪 //注意：append是將上方創建的dom元素插入，而html是字符串，不能解析成dom結構，只能通過html寫入結構；$('li', '.list').eq(0).addClass('active'); //設置默認第一個小圓點樣式；$('.img-box').css('width', (len + 1) * this.itemWidth) }

?

//點擊事件處理 Swiper.prototype.bindEvent = function () {var self = this; //為了區分下面事件里面的this與全局的this，這里我們保存一下這個全局的this；//綁定點擊事件；$('.prev').add('.next').add('.list li').on('click', function () {self.flag = true;if ($(this).attr('class') == "btn prev") {self.move('prev');} else if ($(this).attr('class') == "btn next") {self.move('next');} else {self.move($(this).index());}})self.wrap.on('mouseenter', function () { $('.btn').show();self.flag = false;}).on('mouseleave', function () {$('.btn').hide();self.flag = true;self.sliderAuto();}) } //點擊事件運動 Swiper.prototype.move = function (dir) {var self = this;var flag = this.flag;var itemWidth = self.itemWidth;var len = self.len;if (flag) {if (dir == 'prev' || dir == 'next') {if (dir == 'prev') {if (self.nowIndex == 0) {$('.img-box').css('left', -(len * itemWidth) + 'px');self.nowIndex = len - 1;} else {self.nowIndex--;}} else {if (self.nowIndex == len - 1) {$('.img-box').animate({ left: -(len * itemWidth) }, function () {$(this).css('left', '0');self.changeStyle();})self.nowIndex = 0;} else {self.nowIndex++;}}} else {self.nowIndex = dir;}self.slider()} }Swiper.prototype.slider = function () {var self = this;var flag = self.flag;var nowIndex = self.nowIndex;var itemWidth = self.itemWidth;flag = false;$('.img-box').animate({ left: -(nowIndex * itemWidth) }, function () {self.flag = $('.btn').css('display') === 'block' ? false : true;self.changeStyle();self.sliderAuto();}) }

?

//自動輪播 Swiper.prototype.sliderAuto = function () {var self = this;var flag = self.flag;if (flag) {clearTimeout(self.timer);self.timer = setTimeout(function () {self.move('next');}, 1500)} } //索引點css樣式處理 Swiper.prototype.changeStyle = function () {var self = this;var nowIndex = self.nowIndex;$('.active').removeClass('active');$('.list li').eq(nowIndex).addClass('active'); }

?

然后用一個立即執行函數將上各個模塊包裹。不污染全局

(function ($) {//插件是實例化：sliderShow方法$.fn.extend({sliderShow: function (opetions) {var opts = opetions;opts.father = this || $('body');new Swiper(opts);}})function Swiper(opts) {this.opts = opts || {};this.swiper = this.opts.father;this.init();}//入口函數，控制臺資源分配Swiper.prototype.init = function () {this.nowIndex = 0;this.timer = undefined;this.flag = true;this.len = this.opts.image.length;this.picWidth = this.swiper.width();this.picHeight = this.swiper.height();this.image = this.opts.image;this.createDom();this.bindEvent();this.sliderAuto();}Swiper.prototype.createDom = function () {console.log('構建dom')var len = this.len;var str = " ";var listStr = " ";var imgBox = $('<ul class = "img-box"></ul>');var list = $('<ul class="list"></ul>');var btn = '<div class="btn prev"></div><div class="btn next"></div>'for (var i = 0; i < len; i++) {str += "<li><a><img src=" + this.image[i] + ' alt=""></a></li>';listStr += '<li></li>';}str += "<li><a><img src=" + this.image[0] + ' alt=""></a></li>'this.swiper.append(imgBox.html(str)).append($(btn)).append(list.append($(listStr)));$('li', '.list').eq(0).addClass('active');$('.img-box').css('width', (len + 1) * this.picWidth)}Swiper.prototype.bindEvent = function () {var self = this; var flag = self.flag;//綁定點擊事件；$('.list li').add('.prev').add('.next').on('click', function () {if ($(this).attr('class') == 'btn prev') {//點擊左，頁面向左移self.move('prev');} else if ($(this).attr('class') == 'btn next') {//點擊右，頁面向右移self.move('next');} else {//點擊索引圓點，往特定的索引切換self.move($(this).index());self.changeStyle()}})//實際控制自動輪播$('#swiper').on('mouseenter', function () {$('#swiper .btn').show();clearTimeout(self.timer);}).on('mouseleave', function () {$('#swiper .btn').hide();self.sliderAuto();})}Swiper.prototype.move = function (dir) {//不能對nnowindex 進行賦值保存var self = this;var flag = self.flag;var picWidth = self.picWidth;var len = self.len;console.log(flag, '運動判斷')if (flag) {flag = false;//防止運動疊加if (dir == 'prev') {if (self.nowIndex == 0) {$('.img-box').css('left', -len * picWidth + 'px');//緩沖跳到最后 self.nowIndex = len - 1;} else {self.nowIndex--;}} else if (dir == 'next') {if (self.nowIndex == len - 1) {$('.img-box').animate({ 'left': -(len * picWidth) + 'px' }, function () {$('.img-box').css('left', '0');})self.nowIndex = 0;} else {self.nowIndex++;}} else {self.nowIndex = dir;}self.slider();self.changeStyle()}}Swiper.prototype.slider = function () {var self = this;var nowIndex = self.nowIndex;var picWidth = self.picWidth;$('.img-box').animate({ 'left': -(nowIndex * picWidth) + 'px' }, function () {self.flag = true;})}Swiper.prototype.sliderAuto = function () {var self = this;console.log(self.nowIndex);clearTimeout(self.timer);self.timer = setTimeout(function () {self.move('next');self.sliderAuto();}, 2000)}Swiper.prototype.changeStyle = function () {var self = this;var nowIndex = self.nowIndex;$('.active').removeClass('active');$('.list li').eq(nowIndex).addClass('active');} }($)) $('#swiper').sliderShow({image:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"] })

最終還是有點小問題。封裝插件后，連續點擊左右按鈕會出現持續運動。希望有人幫解決下~

總結

以上是生活随笔為你收集整理的jq轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。