如何用原生javascript實現(xiàn)輪播圖

這篇文章主要介紹了如何用原生javascript實現(xiàn)輪播圖，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用原生js實現(xiàn)輪播圖

使用原生JS實現(xiàn)輪播圖的案例，靜態(tài)效果圖如下：

核心思想

將一些圖片在一行中平鋪，然后計算偏移量再利用定時器實現(xiàn)定時輪播。

步驟：

1. 首先搭建基本的HTML結構

<!-- 結構部分 --><!-- 結構說明：外層一個container盒子，用于放圖片盒子（imgBox）、左箭頭、右箭頭、底部小圓圈， 
        圖片盒子中放的是輪播的圖片 -->
    <p class="container">
      <!-- 注意：此處強調一下，圖片盒子imgBox的left屬性必須寫成行內樣式，否則js中拿不到left的值 -->
        <p class="imgBox" style="left: -500px;"> 
            <img src="./images/lunbo1.jpg" alt="輪播圖1">
            <img src="./images/lunbo2.jpg" alt="輪播圖2">
            <img src="./images/lunbo3.jpg" alt="輪播圖3">
            <img src="./images/lunbo4.jpg" alt="輪播圖4">
            <img src="./images/lunbo5.jpg" alt="輪播圖5">
        </p>

        <a href="javascript:;" class="leftArrow"  style="display: none;">
            <img src="./images/leftArrow.png" alt="左箭頭">
        </a>
        <a href="javascript:;" class="rightArrow"  style="display: none;">
            <img src="./images/rightArrow.png" alt="右箭頭">
        </a>

        <ul class="circleFather">
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>

2. 樣式部分

使用絕對定位把左右箭頭和底部小圓圈放在合適的位置。外層容器盒子的寬度等于一張圖片的寬度，圖片盒子的寬度為所有圖片寬度之和，所有圖片左浮動，實現(xiàn)水平排列。

☆☆☆注意：此處強調一下，圖片盒子imgBox的left屬性必須寫成行內樣式，否則js中拿不到left的值

 <style>
        /* 內聯(lián)樣式表 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        /* 外層容器樣式 */
        
        .container {
            height: 330px;
            width: 500px;  //外層容器盒子的寬度等于一張圖片的寬度
            margin: 100px auto;
            position: relative;
            overflow: hidden;  //超出隱藏
        } 
        /* 左右箭頭樣式 */
        
        .container .leftArrow,
        .container .rightArrow {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            z-index: 1;
        }
        
        .container .leftArrow {
            left: 5px;
        }
        
        .container .rightArrow {
            right: 5px;
        }
        /* 圖片盒子樣式 */
        
        .imgBox {
            position: absolute;
            transition: all 0.5s;
            height: 333px;
            width: 3500px;  //圖片盒子的寬度為所有圖片寬度之和
        }
        
        .imgBox img {
            height: 330px;
            width: 500px;
            float: left;  //所有圖片左浮動，實現(xiàn)水平排列
        }
        /* 底部小圓圈樣式 */
        
        .circleFather {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0);
        }
        
        .circleFather li {
            float: left;
            height: 10px;
            width: 10px;
            margin: 0 5px;
            border: 2px solid #e7641c;
            border-radius: 50%;
        }
        
        .select {
            background-color: #e7641c;
        }
    </style>

3. js邏輯部分

3.1 首先實現(xiàn)點擊左右箭頭向左右滑動的功能

var container = document.querySelector('.container') //獲取外層容器盒子
        var imgBox = document.querySelector('.imgBox') //獲取圖片盒子
        var leftArrow = document.querySelector('.leftArrow') //獲取左箭頭
        var rightArrow = document.querySelector('.rightArrow') //獲取右箭頭


        //給左箭頭綁定點擊事件
        leftArrow.onclick = function() {
            goLast()
        }

        //右箭頭點擊事件
        rightArrow.onclick = function() {
            goNext()
        }

        // 顯示上一張圖片
        // 1.點一次左箭頭，就讓left值-500，點一次右箭頭，就讓left值+500
        // 2.但是有兩種特殊情況，（1）當前展示圖片1時，點擊左箭頭則需展示圖片5，（2）當前展示圖片5時，點擊右箭頭則需展示圖片1
        function goLast() {
            let newBoxLeft            if (imgBox.style.left === '0px') {
                newBoxLeft = -2000
            } else {
                // imgBox.style.left是一個字符串，所以要轉化為數字才能進行計算，而設定left時就要加上px成為一個字符串
                newBoxLeft = parseInt(imgBox.style.left) + 500;
            }
            imgBox.style.left = newBoxLeft + "px"
        }

        // 顯示下一張圖片
        function goNext() {
            let newBoxLeft            if (imgBox.style.left === '-2000px') {
                newBoxLeft = 0
            } else {
                newBoxLeft = parseInt(imgBox.style.left) - 500;
            }
            imgBox.style.left = newBoxLeft + "px"
        }

此時效果圖如下：

3.2 實現(xiàn)自動輪播功能

在定時器中每1500毫秒調用一次goNext方法，實現(xiàn)自動切換圖片

// 使用setInterval()定時器實現(xiàn)自動切換功能
        var timer        function autoChange() {
            timer = setInterval(goNext, 1500)
        }
        autoChange()

3.3 實現(xiàn)鼠標懸停在圖片上時，停止自動切換，停留在當前圖片，移出時繼續(xù)自動切換

 // 監(jiān)聽鼠標移入事件和移出事件，實現(xiàn)鼠標懸停在圖片上時，停止自動切換，停留在當前圖片,
 // 鼠標移出時繼續(xù)自動切換
        container.addEventListener('mouseenter', function() {
            clearInterval(timer)
        })
        container.addEventListener('mouseleave', autoChange)

此處補充一個小插曲：

一開始我監(jiān)聽的是mouseout事件，但是在測試時發(fā)現(xiàn)鼠標移出container盒子時會多次觸發(fā)mouseout事件，導致多次調用autoChange函數，開啟了多個定時器，出現(xiàn)圖片切換混亂的情況，查了一下mouseout事件和mouseleave事件的區(qū)別：

• mouseover和mouseout在父元素和其子元素都可以觸發(fā)，當鼠標穿過一個元素時，觸發(fā)次數得依子元素數量而言。

• mouseenter和mouseleave只在父元素觸發(fā)，當鼠標穿過一個元素時，只會觸發(fā)一次。

• mouseover和mouseout比mouseenter和mouseleave先觸發(fā)

簡單來說就是：

• mouseout在所選區(qū)域內，從父元素到子元素也算移出觸發(fā)。

• mouseleave，在所選區(qū)域，不管有沒有子元素，移出才會觸發(fā)。

3.4實現(xiàn)底部小圓圈跟隨圖片同步切換

實現(xiàn)原理：可以根據imgBox的left值，推算出第幾個小圓圈被選中，絕對值就是小圓圈的索引值，放張圖幫助理解（字有點丑，請忽略，嘻嘻。。）

在goLast()函數和goNext()函數中就可以計算/計算出被選中小圓圈的索引

 var index = 0 // 定義index變量，表示第幾個小圓圈被選中
 
 function goLast() {
            let newBoxLeft            if (imgBox.style.left === '0px') {
                newBoxLeft = -2000
            } else {
                // imgBox.style.left是一個字符串，所以要轉化為數字才能進行計算，而設定left時就要加上px成為一個字符串
                newBoxLeft = parseInt(imgBox.style.left) + 500;
            }
            imgBox.style.left = newBoxLeft + "px"
            index = Math.abs(newBoxLeft / 500)  //計算出被選中小圓圈的索引
        }

 function goNext() {
            let newBoxLeft            if (imgBox.style.left === '-2000px') {
                newBoxLeft = 0
            } else {
                newBoxLeft = parseInt(imgBox.style.left) - 500;
            }
            imgBox.style.left = newBoxLeft + "px"
            index = Math.abs(newBoxLeft / 500)  ///計算出被選中小圓圈的索引
        }

完成3.2、3.3和3.4之后的效果圖如下：

3.5實現(xiàn)點擊底部某個小圓圈時切換成對應的圖片

// 實現(xiàn)點擊底部某個小圓圈時切換成對應的圖片
        (function clickCircle() {
            let circleArr = document.getElementsByTagName('li')
            for (let j = 0; j < circleArr.length; j++) {
                circleArr[j].addEventListener('click', () => {
                    index = j                    selectCircle()
                    imgBox.style.left = -(index * 500) + "px"
                })
            }
        })() //函數自調用寫法，格式：(函數)()

效果圖如下：

到此為止，輪播圖的功能都實現(xiàn)了，但是作為一個強迫癥，發(fā)現(xiàn)自動切換的時候，顯示左右箭頭并不好看，所以再做一點小小的調整。

3.6補充實現(xiàn)鼠標懸停在圖片上時，顯示左右箭頭，移出時隱藏左右箭頭

//給左右箭頭默認隱藏<a href="javascript:;" class="leftArrow" style="display: none;">
    <img src="./images/leftArrow.png" alt="左箭頭"></a><a href="javascript:;" class="rightArrow" style="display: none;">
    <img src="./images/rightArrow.png" alt="右箭頭"></a>

在監(jiān)聽鼠標事件中，改為以下代碼

// 監(jiān)聽鼠標移入事件和移出事件，實現(xiàn)鼠標懸停在圖片上時，停止自動切換，停留在當前圖片,鼠標移出時繼續(xù)自動切換
        container.addEventListener('mouseenter', function() {
            clearInterval(timer)
            leftArrow.style.display = "inline"
            rightArrow.style.display = "inline"
        })
        container.addEventListener('mouseleave', function() {
            autoChange()
            leftArrow.style.display = "none"
            rightArrow.style.display = "none"
        })

效果圖：

到這就結束了。

下面是完整代碼。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js實現(xiàn)輪播圖——小肉包</title>
    <style>
        /* 內聯(lián)樣式表 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        /* 外層容器樣式 */
        
        .container {
            height: 330px;
            width: 500px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        /* 左右箭頭樣式 */
        
        .container .leftArrow,
        .container .rightArrow {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            z-index: 1;
            width: 32px;
            height: 32px;
        }
        
        .container .leftArrow {
            left: 5px;
        }
        
        .container .rightArrow {
            right: 5px;
        }
        /* 圖片盒子樣式 */
        
        .imgBox {
            position: absolute;
            /* transition: all 0.5s; */
            height: 333px;
            width: 3500px;
        }
        
        .imgBox img {
            height: 330px;
            width: 500px;
            float: left;
        }
        /* 底部小圓圈樣式 */
        
        .circleFather {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0);
        }
        
        .circleFather li {
            float: left;
            height: 10px;
            width: 10px;
            margin: 0 5px;
            border: 2px solid #e7641c;
            border-radius: 50%;
        }
        
        .select {
            background-color: #e7641c;
        }
    </style></head><body>
    <!-- 結構部分 -->
    <!-- 結構說明：外層一個container盒子，用于放圖片盒子（imgBox）、左箭頭、右箭頭、底部小圓圈， 
        圖片盒子中放的是輪播的圖片 -->
    <p class="container">
        <!-- 注意：此處強調一下，圖片盒子imgBox的left屬性必須寫成行內樣式，否則js中拿不到left的值 -->
        <p class="imgBox" style="left: 0px;">
            <!-- <img src="./images/lunbo5.jpg" alt="輪播圖5"> -->
            <img src="./images/lunbo1.jpg" alt="輪播圖1">
            <img src="./images/lunbo2.jpg" alt="輪播圖2">
            <img src="./images/lunbo3.jpg" alt="輪播圖3">
            <img src="./images/lunbo4.jpg" alt="輪播圖4">
            <img src="./images/lunbo5.jpg" alt="輪播圖5">
            <!-- <img src="./images/lunbo1.jpg" alt="輪播圖1"> -->
        </p>

        <a href="javascript:;" class="leftArrow" style="display: none;">
            <img src="./images/leftArrow.png" alt="左箭頭">
        </a>
        <a href="javascript:;" class="rightArrow" style="display: none;">
            <img src="./images/rightArrow.png" alt="右箭頭">
        </a>

        <ul class="circleFather">
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>



    <!-- JavaScript部分 -->
    <script type="text/javascript">
        var container = document.querySelector('.container') //獲取外層容器盒子
        var imgBox = document.querySelector('.imgBox') //獲取圖片盒子
        var leftArrow = document.querySelector('.leftArrow') //獲取左箭頭
        var rightArrow = document.querySelector('.rightArrow') //獲取右箭頭
        var index = 0 // 定義index變量，表示第幾個小圓圈被選中


        //給左箭頭綁定點擊事件
        leftArrow.onclick = function() {
            goLast()
        }

        //右箭頭點擊事件
        rightArrow.onclick = function() {
            goNext()
        }

        // 顯示上一張圖片
        // 1.點一次左箭頭，就讓left值-500，點一次右箭頭，就讓left值+500
        // 2.但是有兩種特殊情況，（1）當前展示圖片1時，點擊左箭頭則需展示圖片5，（2）當前展示圖片5時，點擊右箭頭則需展示圖片1
        function goLast() {
            let newBoxLeft            if (imgBox.style.left === '0px') {
                newBoxLeft = -2000
            } else {
                // imgBox.style.left是一個字符串，所以要轉化為數字才能進行計算，而設定left時就要加上px成為一個字符串
                newBoxLeft = parseInt(imgBox.style.left) + 500;
            }
            imgBox.style.left = newBoxLeft + "px"
            index = Math.abs(newBoxLeft / 500) //計算第幾個小圓圈被選中
            selectCircle()
        }

        // 顯示下一張圖片
        function goNext() {
            let newBoxLeft            if (imgBox.style.left === '-2000px') {
                newBoxLeft = 0
            } else {
                newBoxLeft = parseInt(imgBox.style.left) - 500;
            }
            imgBox.style.left = newBoxLeft + "px"
            index = Math.abs(newBoxLeft / 500)
            selectCircle()
        }

        // 使用setInterval()定時器實現(xiàn)自動切換功能
        function autoChange() {
            timer = setInterval(goNext, 1500)
        }
        autoChange()

        // 監(jiān)聽鼠標移入事件和移出事件，實現(xiàn)鼠標懸停在圖片上時，停止自動切換，停留在當前圖片,鼠標移出時繼續(xù)自動切換
        container.addEventListener('mouseenter', function() {
            clearInterval(timer)
            leftArrow.style.display = "inline"
            rightArrow.style.display = "inline"
        })
        container.addEventListener('mouseleave', function() {
            autoChange()
            leftArrow.style.display = "none"
            rightArrow.style.display = "none"
        })


        //實現(xiàn)底部小圓圈跟隨圖片同步切換
        function selectCircle() {
            //獲取所有的小圓圈偽數組
            let circleArr = document.getElementsByTagName('li')
            for (let i = 0; i < circleArr.length; i++) {
                circleArr[i].className = ""
            }
            circleArr[index].className = 'select'
        }



        // 實現(xiàn)點擊底部某個小圓圈時切換成對應的圖片
        (function clickCircle() {
            let circleArr = document.getElementsByTagName('li')
            for (let j = 0; j < circleArr.length; j++) {
                circleArr[j].addEventListener('click', () => {
                    index = j                    selectCircle()
                    imgBox.style.left = -(index * 500) + "px"
                })
            }
        })() //函數自調用寫法，格式：(函數)()
    </script></body></html>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何用原生javascript實現(xiàn)輪播圖”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!