原生js实现轮播图效果

原生js实现轮播图效果

html部分

 <div class="page-head">
    <img src="./img/banner.png" alt="图片不存在" class="ban actives">
    <img src="./img/b1.png" alt="图片不存在" class="ban">
    <img src="./img/b2.png" alt="图片不存在" class="ban">
    <img src="./img/b3.png" alt="图片不存在" class="ban">

    <div class="arrows">
        <img src="./img/a.png" alt="图片不存在" class="left-arrows">
        <img src="./img/b.png" alt="图片不存在" class="right-arrows">
    </div>
</div>

<div class="num">
    <div class="num-one number">01</div>
    <div class="num-one">02</div>
    <div class="num-one">03</div>
    <div class="num-one">04</div>
</div>

css部分

    .page-head{
        position: absolute;
        width:1920px;
        height:944px;
    }
    /*图片*/
    .ban{
        position: absolute;
        width:1920px;
        height:944px;
        opacity: 0;
        transition: all 0.5s linear;
    }
    .helpline{
        position: absolute;
        width:210px;
        height:38px;
        color:rgba(255,255,255,1);
        margin: 22px 0 0 1635px;
        text-align: center;
    }

    /*两边的箭头*/
    .arrows{
        width: 1726px;
        height: 196px;
        position: relative;
        margin: 203px auto;
    }
    .left-arrows,.right-arrows{
        display: inline-block;
        width: 98px;
        height: 196px;
    }
    .right-arrows{
        float: right;
    }

    /*数字*/
    .num{
        position: absolute;
        width: 450px;
        height:92px;
        top: 340px;
        left: 1271px;
        font-size:38px;
        transform:rotate(-90deg);
        display: flex;
        justify-content: space-between;
    }
    .num-one{
        width: 25%;
        height: 92px;
        color:rgba(255,255,255,1);
        font-weight:bold;
        text-align: center;
        line-height: 92px;
    }
    .number{
        font-size: 90px;
        transition: all 0.5s linear;
    }
    .actives{
        opacity: 1!important;
        transition: all 0.5s linear;
    }

js部分

    var numbers = document.querySelectorAll(".num-one");
    var ban = document.querySelectorAll(".ban");
    var left = document.querySelector(".left-arrows");
    var right = document.querySelector(".right-arrows");
    
    // 实现鼠标移入数字换图片
    numbers.forEach(function (les,index) {
        les.onmouseenter = function () {
            console.log(111);
            for (var  i = 0;i < ban.length;i++){
                numbers[i].classList.remove("number");
                ban[i].classList.remove("actives")
            }
            les.classList.add("number");
            ban[index].classList.add("actives");
        };
    // 点击左箭头实现轮播图效果
        let n = 0;
        left.onclick = function () {
            n--;
            if (n < 0){
                n = ban.length -1;
            }
            for (var i = 0;i < ban.length;i++){
                numbers[i].classList.remove("number");//用添加类名的方法实现效果
                ban[i].classList.remove("actives")
            }
            numbers[n].classList.add("number");
            ban[n].classList.add("actives");
        };
        // 点击右箭头实现轮播图效果
        right.onclick = function () {
            n++;
            if (n > ban.length -1){
                n = 0;
            }
            for (var i = 0;i < ban.length;i++){
                numbers[i].classList.remove("number");
                ban[i].classList.remove("actives")
            }
            numbers[n].classList.add("number");
            ban[n].classList.add("actives");
        };
    });