jq轮播图插件
插件實現:(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"] })最終還是有點小問題。封裝插件后,連續點擊左右按鈕會出現持續運動。希望有人幫解決下~
總結
- 上一篇: 数据结构算法实现
- 下一篇: 调用腾讯地图API、高德地图API 获取