JS原生手写轮播图

JS原生手写轮播图

上代码

JS

<script>
    var ims = document.getElementsByClassName('im');
    var z = document.getElementsByClassName('z')[0];
    var s = document.getElementsByClassName('s')[0];

    var index = 0;
    s.onclick = function () {
        index++;
        if (index > ims.length - 1) {
            index = 0;
        }
        for (var i = 0; i < ims.length; i++) {
            ims[i].style.display = 'none'
        }
        ims[index].style.display = 'block'
    }

    z.onclick = function () {
        index--;

        if (index < 0) {
            index = ims.length - 1;
        }
        for (var i = 0; i < ims.length; i++) {
            ims[i].style.display = 'none'
        }
        ims[index].style.display = 'block'
    }
</script>

  
 

  
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
 

HTML

<div class="box">
    <ul>
        <li><img src="01%20(1).jpg" class="im"></li>
        <li><img src="01%20(2).jpg" class="im"></li>
        <li><img src="01%20(3).jpg" class="im"></li>
        <li><img src="01%20(4).jpg" class="im"></li>
    </ul>
    <span class="z">&lt;</span>
    <span class="s">&gt;</span>
</div>

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

CSS

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

        .box {
            width: 500px;
            height: 500px;
            border: 2px solid fuchsia;
            margin: 50px auto;
            position: relative;
        }

        .box img {
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        li {
            list-style: none;

        }

        img:first-child {
            display: block;
        }

        .z {
            width: 20px;
            height: 60px;
            line-height: 60px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .s {
            width: 20px;
            height: 60px;
            line-height: 60px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
    </style>

  
 

  
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
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/108476056