原生JS实现旋转木马式图片轮播插件(纯JS实现左右滑动轮播图)
本人自己寫過三個圖片輪播，一個是簡單的原生JS實現的，沒有什么動畫效果的，一個是結合JQuery實現的，淡入淡出切換的。現在想做一個酷一點的放在博客或者個人網站，到時候可以展示自己的作品。逛了一下慕課網，發現有個旋轉木馬的jquery插件課程，有點酷酷的，于是就想著用原生JS封裝出來。做起來才發現，沒有自己想象中的那么容易。。。不啰嗦了，講解一下實現過程吧。
二、效果
由于自己的服務器還沒弄好。在線演示不了（ORZ...)，只能放一張效果圖了。
從圖片上還是可以看出大概效果的，我就不多說了。想看真實代碼效果的，歡迎到我的github上面download代碼，別忘了給我的github項目點個星星噢^_^
三、實現過程
html結構
<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>
登錄后復制
這個結構和一般輪播的html代碼結構是一樣的，稍有不同就是，主輪播div上面有一個data-setting的屬性，這個屬性里面就是一些輪播效果的參數。參數的具體意義稍后再講解。
css部分的代碼就不貼了，最重要就是要注意元素的絕對定位，由效果圖可以看出來，每張圖片的位置、大小都不一樣，所以這些都是通過js控制的，因此需要絕對定位。下面重點講一下js實現過程。
JS實現過程
下面講幾個JS的關鍵步驟，做好了這幾個步驟之后，應該就沒有什么難點了。
①默認參數
既然是封裝插件，那么肯定會有一些參數的默認值需要配置的啦。這個插件中，主要有如下參數：
width:1000, //幻燈片區域的寬度
height:400, //幻燈片區域的高度
carrouselWidth:700, //幻燈片第一幀的寬度
carrouselHeight:400, //幻燈片第一幀的高度
scale:0.9,//記錄顯示比例關系，例如第二張圖比第一張圖顯示的時候寬高小多少
autoPlay:true,//是否自動播放
timeSpan:3000,//自動播放時間間隔
verticalAlign:'middle' //圖片對齊方式，有top\middle\bottom三種方式，默認為middle
②封裝對象
因為一個網站可能有多個地方都會用到同一個輪播插件，所以封裝很關鍵。定義了這個對象之后，如果給對象定義一個初始化方法是可以創建多個對象的，只需要把所有類相同的dom傳進去就可以了。所以，我的初始化方法如下：
Carousel.init=function(carrousels){
var _this=this;
//將nodeList轉換為數組
var cals= toArray(carrousels); <br> /*因為原生JS獲取所有的類，得到的是一個nodeList，是一個類數組,如果想要使用數組的方法則需要轉化為真正的數組。這里toArray為轉化方法。*/
cals.forEach(function(item,index,array){
new _this(item);
});
}
登錄后復制
這樣的話，我在window.onload的時候，調用Carrousel.init(document.querySelectorAll('.carrousel-main'));這樣就可以創建多個輪播啦！
③初始化好第一幀的位置參數
因為，第一幀之后的所有幀的相關參數都是參照第一幀來定義的，因此，定義好第一幀很關鍵。
setValue:function(){
this.carrousel.style.width=this.Settings.width+'px';
this.carrousel.style.height=this.Settings.height+'px';
/*左右按鈕設置,這里要讓左右按鈕平均地瓜分輪播區域寬減去第一幀寬度之后的區域,z-index要比除第一幀外所有圖片都高，而圖片剛好左右分放置，因此z-index的值就是圖片數量的一半。*/
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);
//第一幀相關設置
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);
},
登錄后復制
這里，就是new對象的時候，就到dom結點中獲取data-setting參數，然后更新默認參數配置。這里有個地方需要注意的，獲取dom的參數不能直接以賦值的方式更新默認參數，因為用戶配置參數的時候，不一定會所有參數都配置一次。如果直接賦值而用戶剛好不是所有參數都配置的話就會造成參數丟失。這里我是自己寫了一個類似JQuery中的$.extend方法的對象擴展方法來更新參數的。具體就不列舉了，感興趣的可以去下載。
④其他圖片位置設置
這里的圖片實際上就是把除第一張之外的圖片，平均地分到左右兩則，而左邊的圖片位置和右邊的是不同的，因此需要分別配置：
//設置右邊圖片的位置關系
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的值越小，可以用圖片數量的一般逐漸遞減
item.style.width=rw+'px';
item.style.height=rh+'px';
item.style.opacity=1/(++i);//越往右邊透明度越小<br> //這里的gap計算方法為：輪播區域減去第一幀寬度，除2，再除左邊或者右邊的圖片張數
item.style.left=(constOffset+(++index)*gap-rw)+'px';//left的值實際上就是第一幀的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; //獲取相應參數
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;
}
//這里需要注意，因為第二張圖片是參照第一張的，而這樣改變的時候，第一張是首先被改變的，因此必須先把第一張的相關參數臨時保存起來。
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動畫函數
_this.rotateFlag=true;
});
});
}
登錄后復制
這里的旋轉，如果不使用一些動畫過度，會顯得很生硬。但是原生JS并沒有動畫函數，這里我是自己寫了一個模仿的動畫函數。其原理就是獲取dom原來的樣式值，與新傳入的值比較。用一些方法定義一個速度。我這里的速度就是用其差值除18.然定義一個計時器，參考了一下jquery源碼里面的時間間隔為每13毫秒執行一次。然后才原來的樣式值每次加上speed后等于傳入的值的時候清楚計時器即可。具體可以看這里。
好啦，關鍵的地方都差不多啦，如果明白這些過程應該就很容易了！
四、總結思考
總結：
個人感覺這還是一個比較好理解的插件。如果能結合JQuery來做就相當簡單了。但是用原生來寫的話，還是有一些不那么流暢的感覺。應該是自定義動畫比不上JQuery封裝好的動畫吧。
還有，這個插件因為圖片需要平均分到左右兩邊，于是對于偶數數量的圖片來說，這里用的方法是克隆第一張，然后加到最后，形成一個奇數。
思考：
如果說有bug的話，那就是我定義了一個rotateFlag的標志去判斷當前能否旋轉，就是預防快速點擊的時候跟不上。我在按下的時候把rotateFlag設置為false，然后在動畫結束后再把rotateFlag設置為true，但是好像作用并不明顯，希望有關大神可以指教一下，大家共同進步。
更多編程相關知識，請訪問：編程入門！！
總結
以上是生活随笔為你收集整理的原生JS实现旋转木马式图片轮播插件(纯JS实现左右滑动轮播图)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python文件读取模式_day-2 p
- 下一篇： 京东金条怎么协商还款，有以下两步