<div class="carrousel-main" data-setting='{"width":1000,"height":400,
 "carrouselWidth":750,
 "carrouselHeight":400,
 "scale":0.9,
 "verticalAlign":"middle"}'>
 <div class="carrousel-btn carrousel-btn-pre"></div>
 <ul class="carrousel-list">
  <li class="carrousel-item">
  <a href="#"><img src="img/1.jpg"></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img src="img/2.jpg"></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img src="img/3.jpg"></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img src="img/4.jpg"></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img src="img/5.jpg"></a>
 </ul>
 <div class="carrousel-btn carrousel-btn-next"></div>
 </div> 

Carousel.init=function(carrousels){
 var _this=this;
 //將nodeList轉(zhuǎn)換為數(shù)組
 var cals= toArray(carrousels); <br> /*因?yàn)樵鶭S獲取所有的類，得到的是一個(gè)nodeList，是一個(gè)類數(shù)組,如果想要使用數(shù)組的方法則需要轉(zhuǎn)化為真正的數(shù)組。這里toArray為轉(zhuǎn)化方法。*/
 cals.forEach(function(item,index,array){
 new _this(item);
 });
 }

setValue:function(){
this.carrousel.style.width=this.Settings.width+'px';
this.carrousel.style.height=this.Settings.height+'px';
 /*左右按鈕設(shè)置,這里要讓左右按鈕平均地瓜分輪播區(qū)域?qū)挏p去第一幀寬度之后的區(qū)域,z-index要比除第一幀外所有圖片都高，而圖片剛好左右分放置，因此z-index的值就是圖片數(shù)量的一半。*/
 var btnW=(this.Settings.width-this.Settings.carrouselWidth)/2;
 this.preBtn.style.width=btnW+'px';
 this.preBtn.style.height=this.Settings.height+'px';
 this.preBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 
 this.nextBtn.style.width=btnW+'px';
 this.nextBtn.style.height=this.Settings.height+'px';
 this.nextBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 //第一幀相關(guān)設(shè)置
 this.carrouselFir.style.left=btnW+'px';
 this.carrouselFir.style.top=this.setCarrouselAlign(this.Settings.carrouselHeight)+'px';
 this.carrouselFir.style.width=this.Settings.carrouselWidth+'px';
 this.carrouselFir.style.height=this.Settings.carrouselHeight+'px';
 this.carrouselFir.style.zIndex=Math.floor(this.carrouselItems.length/2);
},

//設(shè)置右邊圖片的位置關(guān)系
var rightIndex=level;
rightSlice.forEach(function(item,index,array){
 rightIndex--;
 var i=index;
 rw=rw*carrouselSelf.Settings.scale;//右邊的圖片是按照scale比例逐漸變小的
 rh=rh*carrouselSelf.Settings.scale;
 
 item.style.zIndex=rightIndex;//越往右邊z-index的值越小，可以用圖片數(shù)量的一般逐漸遞減
 item.style.width=rw+'px';
 item.style.height=rh+'px';
 item.style.opacity=1/(++i);//越往右邊透明度越小<br>  //這里的gap計(jì)算方法為：輪播區(qū)域減去第一幀寬度，除2，再除左邊或者右邊的圖片張數(shù)
 item.style.left=(constOffset+(++index)*gap-rw)+'px';//left的值實(shí)際上就是第一幀的left+第一幀的寬度+item的間距減去item的寬度
 item.style.top=carrouselSelf.setCarrouselAlign(rh)+'px';
});

if(dir=='left'){
 toArray(this.carrouselItems).forEach(function(item,index,array){
 var pre;
 if(index==0){//判斷是否為第一張
  pre=_this.carrouselLat;//讓第一張的pre等于最后一張
  var width=pre.offsetWidth; //獲取相應(yīng)參數(shù)
  var height=pre.offsetHeight;
  var zIndex=pre.style.zIndex;
  var opa=pre.style.opacity;
  var top=pre.style.top;
  var left=pre.style.left;
 }else{
  var width = tempWidth;
  var height = tempHeight;
  var zIndex = tempZIndex;
  var opa = tempOpacity;
  var top = tempTop;
  var left = tempLeft;
 }
  //這里需要注意，因?yàn)榈诙垐D片是參照第一張的，而這樣改變的時(shí)候，第一張是首先被改變的，因此必須先把第一張的相關(guān)參數(shù)臨時(shí)保存起來。
 tempWidth = item.offsetWidth;
 tempHeight = item.offsetHeight;
 tempZIndex = item.style.zIndex;
 tempOpacity = item.style.opacity;
 tempTop = item.style.top;
 tempLeft = item.style.left;
 
 item.style.width=width+'px';
 item.style.height=height+'px';
 item.style.zIndex=zIndex;
 item.style.opacity=opa;
 item.style.top=top;
  // item.style.left=left;
  animate(item,'left',left,function(){//自定義的原生js動(dòng)畫函數(shù)
  _this.rotateFlag=true;
  });
 });
}