原生JS輪播圖的知識點梳理-有解無憂

JS輪播圖的梳理

拿Dom元素中的oLis和oImg和父元素oNav，可以用documemt.querySelectorAll
用for回圈可以拿出oLis的index值，
寫一個顯示函式 activeOne()，
functiom activeOne(index){
documemt.querySelector(“li.active”).classList.remove(“active”)
document.querySelector(“img .active”).classList.remove(“active”)
oLis[index].classList.add(“active”)
oImg[index].classList.add('active")
}
寫一個計時器函式 start(){
計時器先清再用clearInterval(timer)
timer=setInterval(function(){
index++
if(index>=oLis.length){
index=0}
呼叫顯示函式active(index)
},100 )
以上基本可以實作輪播圖的動態效果
接下來實作滑鼠停留時圖片不動和滑鼠移開時繼續動態
寫一個滑鼠移入的事件系結 oNav.onmouseover
oNav.οnmοuseοver=function(e){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果滑鼠停留在此位置if(target.tagName===“LI”){
清除計時器停止動態clearInterval(timer)
index= target.index
activeOne(target.index)顯示效果給到這個停留的位置圖
}}
寫一個滑鼠移出的事件系結oNav.onmouseout
oNav.οnmοuseοut=function(){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果滑鼠離開此位置if(target.tagName===“LI”){
開始繼續計時器start()
}
html代碼如下

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none
        }

        .wrapBox {
            width: 400px;
            margin: 50px auto;
            position: relative;
        }

        .swiperBox img {
            width: 100%;
            display: none;
        }

        .swiperBox .active {
            display: block;
        }

        .nav {
            position: absolute;
            right: 20px;
            bottom: 25px;
        }

        .nav li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #000;
            float: left;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav .active {
            background-color: red;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="wrapBox">
        <div class="swiperBox">
            <img class="active" src="./source/girlbig1.jpg" alt="">
            <img src="./source/girlbig2.jpg" alt="">
            <img src="./source/girlbig3.jpg" alt="">
            <img src="./source/girlbig4.jpg" alt="">
        </div>
        <ul class="nav">
            <li class="active" data-index="0"></li>
            <li data-index="1"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

js詳細代碼如下

<script>
    //拿元素
    var oLis = document.querySelectorAll(".nav li")
    var oImg = document.querySelectorAll(".swiperBox img")
    var oNav = document.querySelector(".nav")
    var index = 0;
    var timer
    //頁面加載動態開始呼叫計時器
    start()

    for (var i = 0; i < oLis.length; i++) {
        oLis[i].index = i
    }

    //頁面顯示函式
    function activeOne(index) {
        document.querySelector(" img.active").classList.remove("active")
        document.querySelector("li.active").classList.remove("active")
        oLis[index].classList.add("active")
        oImg[index].classList.add("active")
    }

    //計時器開始函式
    function start() {
        clearInterval(timer)
        timer = setInterval(function () {
            index++
            if (index >= oLis.length) {
                index = 0
            }
            activeOne(index)
        }, 1000)
    }
    
    //滑鼠停留動態停止
    oNav.onmouseover = function (e) {
        var ev = e || event;
        var target = ev.target || ev.srcElement;
        
        if (target.tagName === "LI") {
            clearInterval(timer)
            index = target.index
            activeOne(target.index)
        }
    }
    
    //滑鼠移開動態繼續
    oNav.onmouseout = function (e) {
        var ev = e || event;
        var target = ev.target || ev.srcElement;

        if (target.tagName === "LI") start()
    }

</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/208786.html

標籤：其他

上一篇：誰都能學會的SVM（支持向量機）分類器（一）超平面篇

下一篇：JSP標準動作簡介