轮播案例：

1. 将所有图片放在一个数组中, 并动态添加到页面中

2. 根据图片数量,动态创建按钮组,并动态添加到页面中

3. 在页面初始化时,自动加载以上内容,事件是 load

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a {
            color: #000;
            text-decoration: none;
        }
        li {
            list-style: none;
        }
        .lb {
            width: 50em;
            height: 20em;
            margin: auto;
            margin-top: 1em;
        }
        .lb .imgs img {
            width: 100%;
            display: none;
        }
        .lb .imgs .active {
            display: block;
        }
        .lb .btns {
            display: flex;
            place-content: center;
        }
        .lb .btns span {
            width: 1em;
            height: 1em;
            background-color: #000;
            border-radius: 50%;
            margin: -18px 5px 5px;
        }
        .lb .btns span.active {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="lb">
        <div class="imgs">
            <a href=""><img src="./images/banner-1.jpg" alt="" data-index="1" class="active"></a>
            <a href=""><img src="./images/banner-2.jpg" alt="" data-index="2"></a>
            <a href=""><img src="./images/banner-3.jpg" alt="" data-index="3"></a>
            <a href=""><img src="./images/banner-4.jpg" alt="" data-index="4"></a>
        </div>
        <div class="btns">
            <span data-index="1" class="active" onclick="setActive()"></span>
            <span data-index="2" onclick="setActive()"></span>
            <span data-index="3" onclick="setActive()"></span>
            <span data-index="4" onclick="setActive()"></span>
        </div>
    </div>
    <script>
        // 获取所有的图片合按钮 
        let imgs = document.querySelectorAll('.lb .imgs img');
        let btns = document.querySelectorAll('.lb .btns span');
        // console.log(imgs);
        // console.log(btns);
        // 激活状态: 
        function setActive() {
            // 清空所有图片和按钮的状态 
            imgs.forEach(img => img.classList.remove('active'));
            btns.forEach(btn => btn.classList.remove('active'));
            // 根据自定义属性绑定按钮并添加状态
            event.target.classList.add('active');
            imgs.forEach(img => {
                if (img.dataset.index === event.target.dataset.index) {
                    img.classList.add('active');
                }
            });
        }
        // 定时器: setInterval()
        setInterval(
            function (arr) {
                let index = arr.shift();
                // console.log(arr);
                //事件派发器:dispatchEvent()
                btns[index].dispatchEvent(new Event('click'));
                arr.push(index);
            },
            2000,
            Object.keys(btns)
        );
    </script>
</body>
</html>

效果图：

5. 仿写php中文网编程词典选项卡

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    a {
        color: #000;
        text-decoration: none;
    }
    li {
        list-style: none;
    }
    .box {
        /* background-color: lightcyan; */
        width: 20em;
        /* height: 20em; */
        margin: 2em auto;
        border: 1px solid #000;
        /* padding: 1em; */
    }
    .box nav {
        height: 2em;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* place-content: center; */
        text-align: center;
        line-height: 2em;
        /* background-color: aquamarine; */
    }
    .box nav a.active {
        background-color: lightcoral;
        color: aliceblue;
    }
    .box .list {
        padding: 1em;
        display: none;
    }
    .box .active {
        display: block;
    }
</style>
<body>
    <div class="box">
        <!-- 标签 -->
        <nav class="nr">
            <a href="" class="active" data-index="1">TEXT</a>
            <a href="" data-index="2">item</a>
            <a href="" data-index="3">text</a>
        </nav>
        <!-- 内容区 -->
        <ul class="list active" data-index="1">
            <li>
                <a href="">TEXT1</a>
                <a href="">TEXT2</a>
                <a href="">TEXT3</a>
                <a href="">TEXT4</a>
                <a href="">TEXT5</a>
            </li>
        </ul>
        <ul class="list" data-index="2">
            <li>
                <a href="">item1</a>
                <a href="">item2</a>
                <a href="">item3</a>
                <a href="">item4</a>
                <a href="">item5</a>
            </li>
        </ul>
        <ul class="list" data-index="3">
            <li>
                <a href="">text1</a>
                <a href="">text2</a>
                <a href="">text3</a>
                <a href="">text4</a>
                <a href="">text5</a>
            </li>
        </ul>
    </div>
    <script>
        let menu = document.querySelector('.nr');
        menu.addEventListener('click', show, false);
        menu.addEventListener('mouseover', show, false);
        function show() {
            event.preventDefault();
            let btns = [...event.currentTarget.children];
            let lists = document.querySelectorAll('.list');
            // console.log(lists);
            btns.forEach(item => item.classList.remove('active'));
            event.target.classList.add('active');
            lists.forEach(item => item.classList.remove('active'));
            // lists.forEach(list => {
            //     if (list.dataset.index === event.target.dataset.index) {
            //         lists.classList.add('active');
            //     }
            // }
            // )
            [...lists].find(list => list.dataset.index === event.target.dataset.index).classList.add('active');
        }
    </script>
</body>
</html>

效果图：

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

VScode

2022-07-04 19:45:45