叠式原理轮播图演示

<style>
        /* 清除基本样式 */
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }
        /* 给上固定宽高 行内块元素 */
        img {
            width: 100%;
            height: 100%;
            display: block;
        }
        /* 轮播盒子样式 */
        .lunbo {
            width: 700px;
            height: 400px;
            position: relative;
            margin: 100px auto;
        }
        /* 图片盒子样式 */
        .lunbo ul {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .lunbo ul>li {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            /* 让所有都透明 */
            opacity: 0;
            transition: opacity .5s linear;
        }

        /* 让只有gaoliang类名的li显示 */
        .lunbo ul>li.gaoliang {
            opacity: 1;
        }
        /* 焦点按钮样式 */
        .lunbo ol {
            width: 200px;
            height: 30px;
            display: flex;
            justify-content: space-around;
            position: absolute;
            bottom: 0;
        }

        .lunbo ol>li {
            width: 15px;
            height: 15px;
            border: 2px solid rgb(75, 74, 74);
            border-radius: 30px;
            background: rgb(169, 167, 167);
            cursor: pointer;
        }

        .lunbo ol>li.gaoliang {
            background-color: rgb(247, 92, 9);
        }
        /* 左右箭头样式 */
        .lunbo div {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(209, 209, 213);
            border-radius: 30px;
            color: aliceblue;
            cursor: pointer;
        }

        .zuo {
            left: 0;
        }

        .you {
            right: 0;
        }
    </style>

html部分

<div class="lunbo">
        <!-- 图片区 -->
        <ul>
            <li class="gaoliang"><img src="../漫威/1.jpg" alt=""></li>
            <li><img src="../漫威/2.jpg" alt=""></li>
            <li><img src="../漫威/3.jpg" alt=""></li>
            <li><img src="../漫威/4.jpg" alt=""></li>
            <li><img src="../漫威/5.jpg" alt=""></li>
        </ul>
        <!-- 焦点区 -->
        <ol>
            <li data-suoyin="0" data-name="abc" class="gaoliang"></li>
            <li data-suoyin="1" data-name="abc"></li>
            <li data-suoyin="2" data-name="abc"></li>
            <li data-suoyin="3" data-name="abc"></li>
            <li data-suoyin="4" data-name="abc"></li>
            <!-- 左右按钮区 -->
        </ol>
        <div class="zuo"> &lt;</div>
        <div class="you"> &gt;</div>
    </div>

js部分

<script>
        var imgs = document.querySelectorAll('.lunbo>ul>li');
        var anniu = document.querySelectorAll('.lunbo>ol>li');
        var div = document.querySelector('.lunbo');
        // 准备一个变量，表示当前是第几张默认是0；
        var suoyin = 0;

        // 书写一个函数约定参数为true是下一张
        //    false为上一张 
        //     数字就为切换到指定位置
        function qiehuan(dangqian) {
            imgs[suoyin].className = '';
            anniu[suoyin].className = '';
            // 根据dangqian传递的参数来修改suoyin
            // 
            if (dangqian === true) {
                suoyin++
            } else if (dangqian === false) {
                suoyin--
            } else {
                suoyin = dangqian
            }
            // 判断一下边界
            if (suoyin >= imgs.length) {
                suoyin = 0;
            }
            if (suoyin < 0) {
                suoyin = imgs.length - 1
            }
            // 给图片添加类名
            imgs[suoyin].className = 'gaoliang';
            anniu[suoyin].className = 'gaoliang';
        }
        div.onclick = function (e) {

            if (e.target.className === 'zuo') {

                qiehuan(false);
            }
            if (e.target.className === 'you') {
                qiehuan(true);
            }
            if (e.target.dataset.name === 'abc') {
                var i = e.target.dataset.suoyin - 0;
                qiehuan(i);
            }
        }
        // 定时器  每隔五秒下一张图
        setInterval(function () {
            qiehuan(true);
        }, 5000)

关于上面用到的自定义属性

data-*自定义属性名

这种方式需要在自定义属性名前面加上data-，获取/赋值都需要通过dataset，这种方式操作更为简单，所有data-*属性都存放在dataset中

<body>
  <button data-desc="this is a button">Click me!</button>
  
  <script>
    var btn = document.querySelector('button')
    console.log(btn.dataset.desc) // 获取属性值
    btn.dataset.tip = 'please click button' // 设置属性值
  </script>
</body>