轮播案例：

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>

效果图：

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VScode

2022-07-04 19:45:45