原生js實現輪播圖(自輪播,兩翼輪播,點選)

​ 本篇博文實現的是一個原生js寫的輪播圖,含括了大部分輪播圖的功能,有的同窗問前端框架那麼多幹嗎要用原生寫,傷神費腦.

​ 我的感受程序世界裏的框架,是讓大牛更牛,小白也永遠只是小白.框架是死的,需求是不斷更新的,咱們只有知道了原理,才能不斷利用原理知足別人的需求,總會有那麼個時候框架知足不了的.因此,不要依賴框架,爲了避免讓本身一直作小白,最近一直在用原生js寫bootstrap的一些效果.(剛入坑不久,大佬輕噴)

​ 因爲輪播圖在網站中的應用比比皆是,在此分享和總結以前原生js實現的輪播圖.

注:文中代碼只是片斷,具體可在CSDN下載或者去個人GitHub倉庫下載,記得給star哦,3q~

---

​ 首先咱們須要瞭解輪播圖一些基本原理,和輪播圖的一些功能:

輪播圖原理:

並排的一組照片,放在父盒子的框裏,父盒子overflow設置隱藏;

- 輪播圖必須注意的一個問題:

​ 第一張跳最後一張或者相反的時候,怎麼解決中間的空窗期(不處理會很難看)?

輪播圖功能:

自輪播:用於展現,固定時間間隔自動跳下一張;

兩翼輪播:用於用戶點擊兩側的箭頭,跳向先後一張;

點選:一般位於下方用於標識當前所在張,也有點擊跳向對應張的功能

無外乎,大多數輪播圖也就這些功能,先看一下效果圖:

接下來咱們就一一實現這些功能

1 ) HTML視圖:

注意container裏的img,須要在首尾各多加一張,爲了首位跳轉的時候沒有空窗:

原理:以末尾跳向第一張爲例,

當咱們在最後一張時候點擊下一張,視圖顯示最後一張的咱們額外加的一張,也就是第一張的替代,此時顯示的是第一張圖片,確實不是真正位置的第一張,同時,在跳向這假第一張的時候將開始位置重置.

你們能夠結合後面js代碼理解.

<div id="container">
    <!-- 圖片 -->
        <div id="list" style="left: -800px;">
            <img src="img/5.jpg" alt="1" />
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/4.jpg" alt="4" />
            <img src="img/5.jpg" alt="5" />
            <img src="img/1.jpg" alt="5" />
        </div>
        <div id="buttons">  <!-- 點選小圈圈 -->
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
    <!-- 上一張下一張 -->
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>

2 ) CSS樣式:(片斷)

幫助你們理解下面樣式,在此概述一下:

• 點選圓圈,當前張所對應的圈高亮顯示;
• 兩翼,鼠標滑過才顯示,鼠標放上去高亮顯示;
• 層級問題:除了父級的展現框盒子,上面是圖片層,最上面是兩翼和點選圈.

#container { position: relative; width: 800px; height: 600px; border: 3px solid black; overflow: hidden; }
 #buttons{ position: absolute; left: 320px; bottom: 25px; width: 160px; height: 10px; z-index: 6; }

#buttons span{ float: left; margin: 0 10px; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; cursor: pointer; }

.arrow{ position: absolute; top: 260px; z-index: 2; width: 40px; height: 50px; font-size: 40px; font-weight: bold; line-height: 48px; text-align: center; color:#fff; background-color: rgb(0,0,0,0.3); cursor: pointer; }

 #container:hover .arrow { display: block; }

3 ) js代碼:

• 關於動畫,只有跳下一張上一張,無外乎就方向不同,咱們封裝到一個函數,方向傳參控制;
• 定時器的間隔控制函數,中止輪播函數;
• 小圓點的實現比較麻煩,咱們循環給每一個圓加事件,經過屬性標籤index獲取用戶點擊的標籤,用的是getAttribute();
• 還有具體地看代碼註釋吧,註釋的比較詳細.

function animate(offset) {
                //獲取的是style.left，是相對左邊獲取距離，因此第一張圖後style.left都爲負值，
                //且style.left獲取的是字符串，須要用parseInt()取整轉化爲數字。
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
                //無限滾動判斷
                if (newLeft > -600) {
                    list.style.left = -3000 + 'px';
                }
                if (newLeft < -3000) {
                    list.style.left = -600 + 'px';
                }
            }
function buttonsShow() {
                // //將以前的小圓點的樣式清除
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == "on") {
                        buttons[i].className = "";
                    }
                }
                //數組從0開始，故index須要減1
                buttons[index - 1].className = "on";
                console.log(index-1);
            }
 for (var i = 0; i < buttons.length; i++) {

                    buttons[i].onclick = function () {
                        /* 這裏得到鼠標移動到小圓點的位置，用this把index綁定到對象buttons[i]上，去谷歌this的用法 */
                        /* 因爲這裏的index是自定義屬性，須要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/
                        var clickIndex = parseInt(this.getAttribute('index'));//this指向當前點擊圈
                        var offset = 600 * (index - clickIndex); //這個index是當前圖片停留時的index
                        index = clickIndex; //存放鼠標點擊後的位置，用於小圓點的正常顯示
                        animate(offset);
                        buttonsShow();
                    }

            }

            container.onmouseover = stop;
            container.onmouseout = play;
            play(); //初始化