成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

利用面向?qū)ο笞约簞?dòng)手寫了一個(gè)封裝好的jquery輪播對(duì)象，可滿足一般需求，需要使用時(shí)只需調(diào)用此對(duì)象的輪播方法即可。

demo：https://github.com/zsqosos/shopweb

具體代碼如下：

HTML結(jié)構(gòu)：

<div class="banner" id="J_bg_ban">
　　<ul>
　　　　<li><a ><img src="http://www.gimoo.net/t/1810/banner_04.jpg" alt="廣告圖 /></a></li>
　　　　<li><a ><img src="http://www.gimoo.net/t/1810/banner_04.jpg" alt="廣告圖 /></a></li>
　　　　<li><a ><img src="http://www.gimoo.net/t/1810/banner_03.jpg" alt="廣告圖"/></a></li>
　　　　<li><a ><img src="http://www.gimoo.net/t/1810/banner_04.jpg" alt="廣告圖"/></a></li>
　　　　<li><a ><img src="http://www.gimoo.net/t/1810/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,     //當(dāng)前顯示的圖片索引
 hasStarted : false,   //是否開始輪播
 interval : null,   //定時(shí)器
 liItems : null,    //要輪播的li元素集合
 len : 0,     //liItems的長度
 aBox : null,    //包含指示器的dom對(duì)象
 bBox : null,    //包含前后按鈕的dom對(duì)象

 /**
  * 初始化及控制函數(shù)
  * @param bannnerBox string 包含整個(gè)輪播圖盒子的id或class
  * @param aBox string 包含指示器的盒子的id或class
  * @param btnBox string 包含前后按鈕的盒子的id或class
  */
 startPlay : function(bannnerBox,aBox,btnBox) {
  //初始化對(duì)象參數(shù)
  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);
  //讓第一張圖片顯示，根據(jù)輪播圖數(shù)量動(dòng)態(tài)創(chuàng)建指示器，并讓第一個(gè)指示器處于激活狀態(tài)，隱藏前后按鈕
  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();
  //鼠標(biāo)移入banner圖時(shí)，停止輪播并顯示前后按鈕，移出時(shí)開始輪播并隱藏前后按鈕
  $(bannnerBox).hover(function (){
   that.stop();
   that.bBox.fadeIn(200);
  }, function (){
   that.start();
   that.bBox.fadeOut(200);
  });
  //鼠標(biāo)移入指示器時(shí)，顯示對(duì)應(yīng)圖片，移出時(shí)繼續(xù)播放
  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();
  });
  //點(diǎn)擊左右按鈕時(shí)顯示上一張或下一張
  $(btnBox).find('a:first').click(function(){that.next()});
  $(btnBox).find('a:last').click(function(){that.prev()});
  //開始輪播
  this.start()
 },
 //前一張函數(shù)
 prev : function (){
  var out = this.now;
  this.now = (--this.now + this.len) % this.len;
  this.play(out, this.now);
 },
 //后一張函數(shù)
 next : function (){
  var out = this.now;
  this.now = ++this.now % this.len;
  this.play(out, this.now);
 },
 /**
  * 播放函數(shù)
  * @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');
 },
 //開始函數(shù)
 start : function(){
  if(!this.hasStarted) {
   this.hasStarted = true;
   var that = this;
   this.interval = setInterval(function(){
    that.next();
   },2000);
  }
 },
 //停止函數(shù)
 stop : function (){
  clearInterval(this.interval);
  this.hasStarted = false;
 }
};

$(function(){
　　$.carsouel.startPlay('#J_bg_bn','#J_bg_indicator','#J_bg_btn');
})

最初實(shí)現(xiàn)時(shí)使用面向過程的方法來完成，雖然可以達(dá)到想要的效果，但代碼復(fù)用性不高，需要為頁面上每一個(gè)需要輪播的模塊分別寫對(duì)應(yīng)的函數(shù)。進(jìn)行封裝后，不需要寫太多的代碼，使用時(shí)只需調(diào)用carsouel的startPlay方法并傳入三個(gè)參數(shù)即可，大大提高了易用性。

但是，當(dāng)前代碼的缺陷也非常明顯，就是當(dāng)一個(gè)頁面上同時(shí)有多個(gè)輪播件需要輪播時(shí)，只有最后一個(gè)會(huì)正常工作，這是由于carsouel對(duì)象只有一個(gè)，可以通過復(fù)制carsouel對(duì)象來解決這個(gè)問題，如：

 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');

這樣雖然可以滿足需求，但每次調(diào)用都會(huì)復(fù)制出一個(gè)新的對(duì)象，不僅影響性能，carsouel對(duì)象內(nèi)的方法還不能夠重用，所以還需要進(jìn)一步改進(jìn)。

要想讓多個(gè)輪播件可以同時(shí)使用carsouel對(duì)象，并且可以復(fù)用carsouel對(duì)象內(nèi)部的函數(shù)，必須將carsouel對(duì)象作為一個(gè)構(gòu)造函數(shù)或原型對(duì)象，每次需要使用時(shí)在進(jìn)行實(shí)例化操作，這樣可滿足多個(gè)輪播件同時(shí)使用的需求，同時(shí)做到最大化的函數(shù)復(fù)用。我會(huì)在后續(xù)的文章中解決這個(gè)問題，歡迎關(guān)注或提出指導(dǎo)。

我是一個(gè)javascript的初學(xué)者，這是我第一次發(fā)文，對(duì)于上述問題我會(huì)繼續(xù)努力，尋求最好的解決方法。感謝你們看完。給自己說個(gè)加油吧。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持綠夏網(wǎng)。