Adentent.github.io/tst.html at main · Adentent/Adentent.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<link rel="stylesheet" href="./tst.css">
<div id="wrap">
    <ul class="imgs">
        <li class="active"><a href="#"><img src="img/1.jpg" /></a></li>
        <li><a href="#"><img
                    src="https://upload-bbs.miyoushe.com/upload/2019/06/20/5958231/94787ee459657dfd7db7ae0a7dcc5538_654647389587522885.jpg?x-oss-process=image/auto-orient,0/interlace,1/format,jpg" /></a>
        </li>
        <li><a href="#"><img
                    src="https://upload-bbs.miyoushe.com/upload/2019/06/20/5958231/3adea6a619363e5d7a6015b8bb285290_5994069082682344228.jpg?x-oss-process=image/auto-orient,0/interlace,1/format,jpg" /></a>
        </li>
        <li><a href="#"><img src="img/4.jpg" /></a></li>
        <li><a href="#"><img src="img/5.jpg" /></a></li>
        <li><a href="#"><img src="img/6.jpg" /></a></li>
        <li><a href="#"><img src="img/7.jpg" /></a></li>
    </ul>

    <ul class="lrbtn">
        <li>&lt;</li>
        <li>&gt;</li>
    </ul>

    <ul class="btn">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    //图片自动轮播方法


    //下方焦点切换方法
    var curIndex = 0;
    var imgs = document.querySelectorAll("#wrap .imgs li")
    var btns = document.querySelectorAll("#wrap .btn li")

    /*测试输出*/
    // console.log(btns,imgs)

    for (let i = 0; i < btns.length; i++) {
        btns[i].index = i
        btns[i].onclick = start

    }
    function start() {
        curIndex = this.index;
        // console.log(curIndex);
        for (let i = 0; i < btns.length; i++) {
            btns[i].classList.remove("on")
            imgs[i].classList.remove("active")
        }
        btns[curIndex].classList.add("on")
        imgs[curIndex].classList.add("active")
    }

    //左右按钮的图片切换方法
    //获取左右按钮
    let left = document.querySelector('#wrap .lrbtn').firstElementChild
    let right = document.querySelector('#wrap .lrbtn').lastElementChild
    //点击左按钮，索引减少，图片切到上一张
    left.onclick = function () {
        if (curIndex === 0) {
            curIndex = 6
        } else {
            curIndex--
        }
        for (let i = 0; i < btns.length; i++) {
            btns[i].classList.remove("on")
            imgs[i].classList.remove("active")
        }
        btns[curIndex].classList.add("on")
        imgs[curIndex].classList.add("active")
    }
    //点击右按钮，索引增加，图片切到下一张
    right.onclick = function () {
        curIndex = (++curIndex) % 7
        for (let i = 0; i < btns.length; i++) {
            btns[i].classList.remove("on")
            imgs[i].classList.remove("active")
        }
        btns[curIndex].classList.add("on")
        imgs[curIndex].classList.add("active")
    }

</script>