真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

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

10年積累的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有山陰免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

核心思想

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

步驟：

1. 首先搭建基本的HTML結(jié)構(gòu)


    
      
         
            
            
            
            
            
        


        
            
        
        
            
        

        
            
            
  • 
            
  • 
            
  • 
            
  • 
        
    

    2. 樣式部分

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

    ☆☆☆注意：此處強(qiáng)調(diào)一下，圖片盒子imgBox的left屬性必須寫成行內(nèi)樣式，否則js中拿不到left的值

     

    3. js邏輯部分

    3.1 首先實(shí)現(xiàn)點(diǎn)擊左右箭頭向左右滑動(dòng)的功能

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


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

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

        // 顯示上一張圖片
        // 1.點(diǎn)一次左箭頭，就讓left值-500，點(diǎn)一次右箭頭，就讓left值+500
        // 2.但是有兩種特殊情況，（1）當(dāng)前展示圖片1時(shí)，點(diǎn)擊左箭頭則需展示圖片5，（2）當(dāng)前展示圖片5時(shí)，點(diǎn)擊右箭頭則需展示圖片1
        function goLast() {
            let newBoxLeft            if (imgBox.style.left === '0px') {
                newBoxLeft = -2000
            } else {
                // imgBox.style.left是一個(gè)字符串，所以要轉(zhuǎn)化為數(shù)字才能進(jìn)行計(jì)算，而設(shè)定left時(shí)就要加上px成為一個(gè)字符串
                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"
        }

    此時(shí)效果圖如下：
    如何用原生javascript實(shí)現(xiàn)輪播圖

    3.2 實(shí)現(xiàn)自動(dòng)輪播功能

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

    // 使用setInterval()定時(shí)器實(shí)現(xiàn)自動(dòng)切換功能
        var timer        function autoChange() {
            timer = setInterval(goNext, 1500)
        }
        autoChange()
    3.3 實(shí)現(xiàn)鼠標(biāo)懸停在圖片上時(shí)，停止自動(dòng)切換，停留在當(dāng)前圖片，移出時(shí)繼續(xù)自動(dòng)切換
     // 監(jiān)聽鼠標(biāo)移入事件和移出事件，實(shí)現(xiàn)鼠標(biāo)懸停在圖片上時(shí)，停止自動(dòng)切換，停留在當(dāng)前圖片,
 // 鼠標(biāo)移出時(shí)繼續(xù)自動(dòng)切換
        container.addEventListener('mouseenter', function() {
            clearInterval(timer)
        })
        container.addEventListener('mouseleave', autoChange)

    此處補(bǔ)充一個(gè)小插曲：

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

    • mouseover和mouseout在父元素和其子元素都可以觸發(fā)，當(dāng)鼠標(biāo)穿過一個(gè)元素時(shí)，觸發(fā)次數(shù)得依子元素?cái)?shù)量而言。

    • mouseenter和mouseleave只在父元素觸發(fā)，當(dāng)鼠標(biāo)穿過一個(gè)元素時(shí)，只會(huì)觸發(fā)一次。

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

    簡(jiǎn)單來說就是：

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

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

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

    實(shí)現(xiàn)原理：可以根據(jù)imgBox的left值，推算出第幾個(gè)小圓圈被選中，絕對(duì)值就是小圓圈的索引值，放張圖幫助理解（字有點(diǎn)丑，請(qǐng)忽略，嘻嘻。。）
    如何用原生javascript實(shí)現(xiàn)輪播圖
    在goLast()函數(shù)和goNext()函數(shù)中就可以計(jì)算/計(jì)算出被選中小圓圈的索引

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

 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)  ///計(jì)算出被選中小圓圈的索引
        }

    完成3.2、3.3和3.4之后的效果圖如下：
    如何用原生javascript實(shí)現(xiàn)輪播圖

    3.5實(shí)現(xiàn)點(diǎn)擊底部某個(gè)小圓圈時(shí)切換成對(duì)應(yīng)的圖片
    // 實(shí)現(xiàn)點(diǎn)擊底部某個(gè)小圓圈時(shí)切換成對(duì)應(yīng)的圖片
        (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"
                })
            }
        })() //函數(shù)自調(diào)用寫法，格式：(函數(shù))()

    效果圖如下：
    如何用原生javascript實(shí)現(xiàn)輪播圖
    到此為止，輪播圖的功能都實(shí)現(xiàn)了，但是作為一個(gè)強(qiáng)迫癥，發(fā)現(xiàn)自動(dòng)切換的時(shí)候，顯示左右箭頭并不好看，所以再做一點(diǎn)小小的調(diào)整。

    3.6補(bǔ)充實(shí)現(xiàn)鼠標(biāo)懸停在圖片上時(shí)，顯示左右箭頭，移出時(shí)隱藏左右箭頭
    //給左右箭頭默認(rèn)隱藏
    
    

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

    // 監(jiān)聽鼠標(biāo)移入事件和移出事件，實(shí)現(xiàn)鼠標(biāo)懸停在圖片上時(shí)，停止自動(dòng)切換，停留在當(dāng)前圖片,鼠標(biāo)移出時(shí)繼續(xù)自動(dòng)切換
        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"
        })

    效果圖：
    如何用原生javascript實(shí)現(xiàn)輪播圖
    到這就結(jié)束了。

    下面是完整代碼。

    
    
    
    原生js實(shí)現(xiàn)輪播圖——小肉包
    
    
    
    
        
        
            
            
            
            
            
            
            
        
    

        
            
        
        
            
        

        
            
            
  • 
            
  • 
            
  • 
            
  • 
        
    
    



    
    
        var container = document.querySelector('.container') //獲取外層容器盒子
        var imgBox = document.querySelector('.imgBox') //獲取圖片盒子
        var leftArrow = document.querySelector('.leftArrow') //獲取左箭頭
        var rightArrow = document.querySelector('.rightArrow') //獲取右箭頭
        var index = 0 // 定義index變量，表示第幾個(gè)小圓圈被選中


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

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

        // 顯示上一張圖片
        // 1.點(diǎn)一次左箭頭，就讓left值-500，點(diǎn)一次右箭頭，就讓left值+500
        // 2.但是有兩種特殊情況，（1）當(dāng)前展示圖片1時(shí)，點(diǎn)擊左箭頭則需展示圖片5，（2）當(dāng)前展示圖片5時(shí)，點(diǎn)擊右箭頭則需展示圖片1
        function goLast() {
            let newBoxLeft            if (imgBox.style.left === '0px') {
                newBoxLeft = -2000
            } else {
                // imgBox.style.left是一個(gè)字符串，所以要轉(zhuǎn)化為數(shù)字才能進(jìn)行計(jì)算，而設(shè)定left時(shí)就要加上px成為一個(gè)字符串
                newBoxLeft = parseInt(imgBox.style.left) + 500;
            }
            imgBox.style.left = newBoxLeft + "px"
            index = Math.abs(newBoxLeft / 500) //計(jì)算第幾個(gè)小圓圈被選中
            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()定時(shí)器實(shí)現(xiàn)自動(dòng)切換功能
        function autoChange() {
            timer = setInterval(goNext, 1500)
        }
        autoChange()

        // 監(jiān)聽鼠標(biāo)移入事件和移出事件，實(shí)現(xiàn)鼠標(biāo)懸停在圖片上時(shí)，停止自動(dòng)切換，停留在當(dāng)前圖片,鼠標(biāo)移出時(shí)繼續(xù)自動(dòng)切換
        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"
        })


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



        // 實(shí)現(xiàn)點(diǎn)擊底部某個(gè)小圓圈時(shí)切換成對(duì)應(yīng)的圖片
        (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"
                })
            }
        })() //函數(shù)自調(diào)用寫法，格式：(函數(shù))()
    

    感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何用原生javascript實(shí)現(xiàn)輪播圖”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!


    文章標(biāo)題：如何用原生javascript實(shí)現(xiàn)輪播圖
    當(dāng)前地址：http://weahome.cn/article/jejcic.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220（工作日）

    18980820575（7×24）

    提交需求

    返回頂部