? ? ? ? 關(guān)于原生js實現(xiàn)html的輪播網(wǎng)上有很多很多集漾，但大都寫的太長太多，然后就懶得看了纬霞，最后還是決定自己去摸索js寫的輪播驱显，這樣理解記憶也能更深刻。
? ? ? ? 這里本人總結(jié)出的自動輪播方法十分簡單绢陌，效果也很不錯脐湾。代碼總共就這么多：
????????以三張圖片為例（均為1920 x 360）秤掌，我們首先把靜態(tài)寫好。
? ? ? ? 放圖片主要分為3個div
? ? ? ? 一個是輪播的總框架茵乱，如圖為? lunboFrame? 瓶竭，主要是定一個總框架渠羞，css如下：
? ? ? ? ? ? 其實這個不要也沒事次询。效果圖如下（加個border方便看）：
????????第二個div是輪播的寬度，css如下：
? ? ? ? width設(shè)為100%送巡，是為了自適應(yīng)你的瀏覽器縮放大小骗爆，很多時候1080P的電腦屏在使用瀏覽器縮放比例為100%的情況下無法完整預(yù)覽一個1920px寬的圖片世落，所以width:100%就是自適應(yīng)糟需，當(dāng)你的瀏覽器放大或縮小時洲押，width也跟著你的瀏覽器縮放，好處就是不會出現(xiàn)橫向滾動條杈帐，當(dāng)然咱們也要加上最大寬度max-width，因為在瀏覽器縮小比例的時候累铅，width會變大娃兽，如果沒有這個最大寬度，當(dāng)超過1920px時第练，剩下的圖片就會露出來玛荞，比如我的每次輪播只有一張圖片，那么最大長度就是1920px婴梧，高度不用管了客蹋，上一個div限制過了嚼酝，margin: 0 auto 是使輪播的div置于網(wǎng)頁中央，overflow：hidden是將溢出的部分隱藏闽巩。
? ? ? ? 第三個div是所有圖片加起來的總長度涎跨，以為是要橫著切換，所以長度就是1920*3=5760px
? ? ? ? font-size:0是取消每張圖片之間的間隙撞牢，位置改為相對定位叔营，因為咱們要將這個div進行平移绒尊，至于你喜歡向左還是向右就看你個人興趣了，所有圖片向左平移蟹但，那么就是right，right的值是平移的根本所在麦向，transition是對right值變化時處理為漸變客叉，圖片是肉眼能夠看見的平移磕蛇，沒有這句話圖片則瞬移，當(dāng)然all寫成right也沒事十办。
? ? ? 如果沒有overflow:hidden秀撇，那么三張圖片將會是這樣子：
????????加上之后就是這樣子：
? ? ? ? 剩下兩張位置沒動，只不過被隱藏了向族。
? ? ? ? OK呵燕，靜態(tài)到這里就成功了，剩下的工作就是用js更改right的值了件相。
? ? ? ? 首先在js里我們要獲取 imagesWidth div 的對象和和創(chuàng)建一個right的值的一個變量再扭，這里命名為distance。
? ? ? ? 這個是講imagesWidth這個div平移的主要方法夜矗，第一個局部變量numericaValue是用來獲取當(dāng)前imagesWidth的right 的值來進行判斷，一開始為0紊撕，每次平移一張圖片的寬度罢荡，所以就是imagesWidth.style.right= distance + 'px'? ?;? distance+=1920??
? ? ? ? 這樣就可以將div向左平移1920px，所以看起來就像圖片向左平移了1920px对扶，而且由此計算得出right的值一定是1920的整數(shù)倍区赵，當(dāng)right為3840px時，就說明已經(jīng)平移兩次了浪南，到最后一張了笼才，這個時候，我們就不能再讓div平移了络凿，讓right從新等于0骡送，distance回到1920。OK絮记，圖片的平移就完了摔踱。
? ? ? ? 這個就是讓頁面加載完后，自動無限執(zhí)行imgDistance()這個方法到千，延時為3秒昌渤。OK，完事了憔四。
? ? ? ? ?這是我認為的最簡單的自動輪播膀息，當(dāng)然也有瑕疵，比如到最后一張圖片的時候了赵，由于有transition的延遲潜支，我們也能夠明顯用肉眼看到圖片是自動滾回去的，當(dāng)然解決方法也簡單柿汛，把延遲再做處理就OK冗酿。
? ? ? ? ? 這里是將div進行平移，所以里面的內(nèi)容可以換成視頻或者其它東西络断，只要長度是1920就行裁替。
? ? ? ? （以上是將輪播延時改為1s的效果，3張圖片的輪換）
