插件實(shí)現(xiàn)：（id=swiper名的父級(jí)防止相同樣式覆蓋）

輪播圖顯示區(qū)域作為對(duì)象調(diào)用插件 ,$('#swiper')

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

尺寸不同（width，height）

父級(jí)不同（wrapper）

立即執(zhí)行函數(shù)

父級(jí)容錯(cuò)（沒(méi)用wrap

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

extend實(shí)現(xiàn)插件擴(kuò)展的原理，從extend的源碼可以看出，當(dāng)我們傳入僅有一個(gè)對(duì)象時(shí)，他會(huì)把對(duì)象跟jQuer對(duì)象本身合并，使得在jQuery身上多出了我們傳入的對(duì)象上的方法，這樣一個(gè)過(guò)程，就是我們擴(kuò)展插件的原理；

對(duì)象里面有個(gè)sliderShow方法，將會(huì)合并到 jquer.prototype上實(shí)現(xiàn)實(shí)例化調(diào)用

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

?

//點(diǎn)擊事件處理 Swiper.prototype.bindEvent = function () {var self = this; //為了區(qū)分下面事件里面的this與全局的this，這里我們保存一下這個(gè)全局的this；//綁定點(diǎn)擊事件；$('.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();}) } //點(diǎn)擊事件運(yùn)動(dòng) 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();}) }

?

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

?

然后用一個(gè)立即執(zhí)行函數(shù)將上各個(gè)模塊包裹。不污染全局

(function ($) {//插件是實(shí)例化：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();}//入口函數(shù)，控制臺(tái)資源分配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('構(gòu)建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;//綁定點(diǎn)擊事件；$('.list li').add('.prev').add('.next').on('click', function () {if ($(this).attr('class') == 'btn prev') {//點(diǎn)擊左，頁(yè)面向左移self.move('prev');} else if ($(this).attr('class') == 'btn next') {//點(diǎn)擊右，頁(yè)面向右移self.move('next');} else {//點(diǎn)擊索引圓點(diǎn)，往特定的索引切換self.move($(this).index());self.changeStyle()}})//實(shí)際控制自動(dòng)輪播$('#swiper').on('mouseenter', function () {$('#swiper .btn').show();clearTimeout(self.timer);}).on('mouseleave', function () {$('#swiper .btn').hide();self.sliderAuto();})}Swiper.prototype.move = function (dir) {//不能對(duì)nnowindex 進(jìn)行賦值保存var self = this;var flag = self.flag;var picWidth = self.picWidth;var len = self.len;console.log(flag, '運(yùn)動(dòng)判斷')if (flag) {flag = false;//防止運(yùn)動(dòng)疊加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"] })

最終還是有點(diǎn)小問(wèn)題。封裝插件后，連續(xù)點(diǎn)擊左右按鈕會(huì)出現(xiàn)持續(xù)運(yùn)動(dòng)。希望有人幫解決下~

總結(jié)

以上是生活随笔為你收集整理的jq轮播图插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。