原生js手动编写轮播图

1.导入jquery

地址：Download jQuery | jQuery

2.编写html

<div class="max">
            <div class="lbimg">
                <img src="../DaYang/img/lb/lb1.jpg" class="img0 active">
                <img src="../DaYang/img/lb/lb2.jpg" class="img1">
                <img src="../DaYang/img/lb/lb3.jpg" class="img2">
            </div>
            <br><br><br><br>
            <div class="buttondiv">
                <button οnclick="shang()">上一张</button>
                <button οnclick="xia()">下一张</button>
            </div>

        </div>

3.编写css

img {
            width: 350px;
            display: none;
        }

        .active {
            display: block;
        }

4.编写下一张方法

 

let i = 0 //存储当前轮播图的下标
        // 下一张方法
        function xia() {
            if (i < 2) {
                i = i + 1
                // 字符串拼接获得下一张img的标签
                // 为获得的标签添加一个className为active
                // active的css为display:block;
                $(".img" + i).addClass("active")A
                $(".img" + (i - 1)).removeClass("active")
            } else {
                i = 0
                $(".img" + i).addClass("active")
                $(".img" + 2).removeClass("active")
            }
        }

 5.编写上一张方法

// 上一张方法
        function shang() {
            if (i > 0) {
                i = i - 1
                $(".img" + i).addClass("active")
                $(".img" + (i + 1)).removeClass("active")
            } else {
                i = 2
                $(".img" + i).addClass("active")
                $(".img" + 0).removeClass("active")
            }
        }

 6.编写一个定时器，每秒调用一次下一张方法

// 定时器，每一千毫秒调用一次下一张的方法
        setInterval("xia()", 1000)