基於js的首頁輪播圖的三種方法

用jQuery寫個輪播圖效果

 

 

記住，寫任何JQ交互效果，都是先構建好佈局，而後纔開始JQ處理，DOM操做。

在這裏，節點的構建其實沒什麼好講的，CSS樣式也很簡單，這裏就不貼出代碼了。簡單說下，每一個li下圖片的顯示與隱藏，都是經過它的display屬性來設定。左右切換則是採用圖片li浮動，父層元素ul的寬度爲總圖片寬度（也就是li 的寬度乘以li的個數），ui相對外層父元素絕對定位，並設定爲超出的部分要隱藏。而後當想切換到某個index 的圖片時，則採用修改ul的left值來實現。好比顯示第一張圖片初始定位left值爲0，要想顯示第二張圖則將left值修改成-400px便可。

頁面已經構建完畢，接下來就是JQ的操做。咱們直接貼出代碼：

 

 

 

 

在這段代碼中，咱們先是用變量存儲了當前索引值和圖片總數，而後定義了一個定時器seInterval函數，裏面的邏輯是，若是當前index值小於圖片總數減一，就讓它自增++；若是大於的話，就讓當前index值初始化爲0。

而後爲左右箭頭添加了hover和click事件，在這裏調用了兩個函數，一個是重置定時器函數autoChangeAgain()，一個是圖片切換處理函數changeTo()。當點擊左右箭頭或者是自動輪播的時候，咱們都會調用animate()函數，經過修改left 值產生動態滾動的效果。最後就是給li控制按鈕（小圓點或者是小長條）綁定事件處理函數，當鼠標移入清除定時器，反之則啓動定時器。

大概的原理即是如此，因此說，輪播圖最簡單也最困難，圖要張張輪着播，還要絲滑無縫隙。自此，我才明白了，面試官爲什麼會讓應聘者二話不說，先來寫一個輪播圖效果，由於麻雀雖小，五臟俱全，這裏面涉及到了不少知識點，若是你能寫出來，證實你對JQ的API的熟練程度仍是能夠的，並且也有必定的邏輯性。起碼從側面反映出，你是一個合格的初級前端攻城獅。

 用原生JavaScript來編寫。

 

 

 

 

 

 

 

 

 

 

 

 

看看這JS的代碼量，仍是有些冗雜，不過思路仍是模仿JQ的實現思路。換湯不換藥，代碼裏備註已經很詳細了，這裏就不一一闡述了。

很顯然，此次面試的難度已經提高了一個臺階，考察的是面試者對原生JS的熟練程度，以及邏輯性。相對的，此次的面試崗位的薪水也是相對要高點。若是這個能寫出來的話，我以爲你的JS正在進階，而你也正在進階爲一個專業的JSer。此時，距離中級前端攻城獅就不遠了。

用面向對象的思想去實現JS輪播圖

基於面向對象的輪播圖，看似比面向過程要繁瑣了不少，並且對於一個輪播圖來講，也不必。但面試官想要考察的是應聘者對於面向對象編程的熟練程度，看看你的前端編程能力是否達到了他們公司業務開發的水平。

面向對象的程序設計，首先要建立一個Object實例，定義一個Slider構造器。而後在Slider的prototype原型上定義各類方法，這樣作的好處是能夠很方便的實現輪播圖的效果，減小代碼的冗餘，同時避免了變量命名的衝突問題。

如今須要咱們先來捋一下思路，分析一下構造器裏須要的屬性：

初始化全部的樣式操做

顯示在對應的容器操做

鼠標進入事件

自動播放事件

在這些基本的事件中，咱們須要注意調用的順序，如建立在初始化以前，咱們能夠把一些通用的屬性放到原型鏈中來編寫，這樣的好處是減小了變量空間的佔用和屢次訪問屬性的結果。

過程當中遇到的問題：

1.其中的this指代問題：這裏的解決辦法是在鼠標進入以前的函數中緩存一下var that = this。 這樣就能夠訪問屬性了。

2.圖片輪播判斷：向左點擊的時候， 若是當前的索引值大於零，讓它執行自減操做，若是不大於0 就讓他等於對應圖片長度-1；

向右點擊的時候，當前的索引值小於它對應的輪播圖片的長度-1，執行自加1操做，超過圖片輪播長度時，索引值等於0。

做者：閏土大叔 連接：https://www.jianshu.com/p/74f534d61d24 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。