利用面向對象自己動手寫了一個封裝好的jquery輪播對象，可滿足一般需求，需要使用時只需調用此對象的輪播方法即可。
demo：https://github.com/zsqosos/shopweb
具體代碼如下：
HTML結構：
<div class="banner" id="J_bg_ban"> <ul> <li><a href="#"><img src="banner_04.jpg" alt="廣告圖 /></a></li> <li><a href="#"><img src="banner_04.jpg" alt="廣告圖 /></a></li> <li><a href="#"><img src="banner_03.jpg" alt="廣告圖"/></a></li> <li><a href="#"><img src="banner_04.jpg" alt="廣告圖"/></a></li> <li><a href="#"><img src="banner_05.jpg" alt="廣告圖"/></a></li> </ul> <div class="indicator" id="J_bg_indicator"> </div> <div class="ban-btn clearfloat" id="J_bg_btn"> <a class="next-btn fr" href="javascript:">></a><a class="prev-btn fl" href="javascript:"><</a> </div></div>
css樣式：
.banner { height: 325px; width: 812px; position: relative; overflow: hidden;}.banner ul li{ position: absolute; top: 0; left: 0;}.banner ul li img{ height: 325px; width: 812px; display: block;}.ban-btn{ width: 100%; position: absolute; top: 136px; z-index: 2;}.ban-btn a{ display: inline-block; height: 60px; width: 35px; background: rgba(180,180,180,0.5); font-size: 25px; text-align: center; line-height: 60px; color: #fff;}.ban-btn a:hover{ background: rgba(100,100,100,0.5);}.indicator{ width: 100%; position: absolute; text-align: center; bottom: 15px; z-index: 2;}.indicator a{ display: inline-block; width: 20px; height: 5px; margin:0 3px; background: #fff;}.indicator-active{ background: #FF8C00!important;}jquery代碼：
$.carousel = { now : 0, //當前顯示的圖片索引 hasStarted : false, //是否開始輪播 interval : null, //定時器 liItems : null, //要輪播的li元素集合 len : 0, //liItems的長度 aBox : null, //包含指示器的dom對象 bBox : null, //包含前后按鈕的dom對象 /** * 初始化及控制函數 * @param bannnerBox string 包含整個輪播圖盒子的id或class * @param aBox string 包含指示器的盒子的id或class * @param btnBox string 包含前后按鈕的盒子的id或class */ startPlay : function(bannnerBox,aBox,btnBox) { //初始化對象參數 var that = this; this.liItems = $(bannnerBox).find('ul').find('li'); this.len = this.liItems.length; this.aBox = $(bannnerBox).find(aBox); this.bBox = $(bannnerBox).find(btnBox); //讓第一張圖片顯示，根據輪播圖數量動態創建指示器，并讓第一個指示器處于激活狀態，隱藏前后按鈕 this.liItems.first('li').css({'opacity': 1, 'z-index': 1}).siblings('li').css({'opacity': 0, 'z-index': 0}); var aDom = ''; for (var i = 0; i < this.len; i++){ aDom += '<a></a>'; } $(aDom).appendTo(this.aBox); this.aBox.find('a:first').addClass("imgnum-active"); this.bBox.hide(); //鼠標移入banner圖時，停止輪播并顯示前后按鈕，移出時開始輪播并隱藏前后按鈕 $(bannnerBox).hover(function (){ that.stop(); that.bBox.fadeIn(200); }, function (){ that.start(); that.bBox.fadeOut(200); }); //鼠標移入指示器時，顯示對應圖片，移出時繼續播放 this.aBox.find('a').hover(function (){ that.stop(); var out = that.aBox.find('a').filter('.indicator-active').index(); that.now = $(this).index(); if(out!=that.now) { that.play(out, that.now) } }, function (){ that.start(); }); //點擊左右按鈕時顯示上一張或下一張 $(btnBox).find('a:first').click(function(){that.next()}); $(btnBox).find('a:last').click(function(){that.prev()}); //開始輪播 this.start() }, //前一張函數 prev : function (){ var out = this.now; this.now = (--this.now + this.len) % this.len; this.play(out, this.now); }, //后一張函數 next : function (){ var out = this.now; this.now = ++this.now % this.len; this.play(out, this.now); }, /** * 播放函數 * @param out number 要消失的圖片的索引值 * @param now number 接下來要輪播的圖的索引值 */ play : function (out, now){ this.liItems.eq(out).stop().animate({opacity:0,'z-index':0},500).end().eq(now).stop().animate({opacity:1,'z-index':1},500); this.aBox.find('a').removeClass('imgnum-active').eq(now).addClass('indicator-active'); }, //開始函數 start : function(){ if(!this.hasStarted) { this.hasStarted = true; var that = this; this.interval = setInterval(function(){ that.next(); },2000); } }, //停止函數 stop : function (){ clearInterval(this.interval); this.hasStarted = false; }};$(function(){ $.carsouel.startPlay('#J_bg_bn','#J_bg_indicator','#J_bg_btn');})最初實現時使用面向過程的方法來完成，雖然可以達到想要的效果，但代碼復用性不高，需要為頁面上每一個需要輪播的模塊分別寫對應的函數。進行封裝后，不需要寫太多的代碼，使用時只需調用carsouel的startPlay方法并傳入三個參數即可，大大提高了易用性。
但是，當前代碼的缺陷也非常明顯，就是當一個頁面上同時有多個輪播件需要輪播時，只有最后一個會正常工作，這是由于carsouel對象只有一個，可以通過復制carsouel對象來解決這個問題，如：
var banner1 = $.extend(true,{},carousel); var banner2 = $.extend(true,{},carousel); var banner3 = $.extend(true,{},carousel); banner1.startPlay('#J_bg_ban1','#J_bg_indicator1','#J_bg_btn1'); banner2.startPlay('#J_bg_ban2','#J_sm_indicator2','#J_bg_btn2'); banner3.startPlay('#J_bg_ban3','#J_sm_indicator3','#J_bg_btn3');這樣雖然可以滿足需求，但每次調用都會復制出一個新的對象，不僅影響性能，carsouel對象內的方法還不能夠重用，所以還需要進一步改進。
要想讓多個輪播件可以同時使用carsouel對象，并且可以復用carsouel對象內部的函數，必須將carsouel對象作為一個構造函數或原型對象，每次需要使用時在進行實例化操作，這樣可滿足多個輪播件同時使用的需求，同時做到最大化的函數復用。我會在后續的文章中解決這個問題，歡迎關注或提出指導。
我是一個javascript的初學者，這是我第一次發文，對于上述問題我會繼續努力，尋求最好的解決方法。感謝你們看完。給自己說個加油吧。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
