初学js~~逼格很低的轮播图

萌新初学js 一个逼格很低的轮播图 ^ v ^

html 中代码

<div class="wraper">
            <div id="pre"> < </div>
             <div id="next"> > </div>
            <div class="clear"></div>
            <img src="./img/玉剑传说刀妹.jpg" alt="" class="active">
            <img src="./img/玉剑传说瑞文.jpg" alt="">
            <img src="./img/阿卡丽(1).jpg" alt="">
            <img src="./img/s8.jpg" alt="">

        </div>

js中代码

var pre = document.getElementById("pre");
    var next = document.getElementById("next");
    var imgs = document.querySelectorAll(".wraper>img")

    //声明计数器 显示图片的索引值 默认0
    var count = 0;
    next.onclick = function () {
        //每点击一次自增1
        ++count;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].className = "";
        }
        //先限制  再添加样式
        if (count >= 4) {
            count = 0;
        }
        imgs[count].className = "active";

    };
    pre.onclick = function () {

        --count;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].className = "";
        }
        //先限制  再添加样式
        if (count < 0) {
            count = 3;
        }
        imgs[count].className = "active";
    };

     var timer = setInterval(function () {
        ++count;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].className = "";
        }
        //先限制  再添加样式
        if (count >= 4) {
            count = 0;
        }
        imgs[count].className = "active";
        }, 4000)

注释写在代码中了~~ 非常low的轮播图 有很多不理想的地方 ，比如没有暂停的效果 图片之间过渡 没有过渡动画 ~ ~ ~

来源：CSDN

作者：好好先生～

链接：https://blog.csdn.net/qq_44036956/article/details/103553935