JS经典轮播图和选项卡 - - php中文网博客

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

1. 选项卡

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .box {
            width: 100vw;
        }
        .box ul {
            margin: 0;
            padding: 0;
        }
        .box .menu li {
            display: inline-block;
        }
        .box .menu li:hover {
            cursor: pointer;
        }
        .box .menu li.active {
            background-color: lightgreen;
        }
        .box .content {
            background-color: lightgreen;
            text-align: center;
            height: 120px;
            width: 100vw;
            display: none;
        }
        .box .content.active {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 1. 标签 -->
        <ul class="menu" onclick="show()">
            <li data-index="1" class="active">内容1</li>
            <li data-index="2">内容2</li>
            <li data-index="3">内容3</li>
            <li data-index="4">内容4</li>
        </ul>
        <!-- 2. 内容 -->
        <div class="container">
            <section class="content active" data-index="1">内容1</section>
            <section class="content" data-index="2">内容2</section>
            <section class="content" data-index="3">内容3</section>
            <section class="content" data-index="4">内容4</section>
        </div>
    </div>
    <script>
        function show() {
            // 事件绑定
            const ul = event.currentTarget;
            // 事件触发者
            const li = event.target;
            // 1. 将原高亮的标签去掉高亮样式,并把当前点击的标签设置为高亮
            [...ul.children].forEach(li => li.classList.remove("active"));
            li.classList.add("active");
            // 2. 根据标签的自定义索引属性来确定应该显示哪个列表
            // const uls = document.querySelectorAll(".content");
            document.querySelectorAll(".content").forEach(li => li.classList.remove("active"));
            // data-index === 左面的标签的data-index
            // const content = [...uls].find(ul => ul.dataset.index === li.dataset.index);
            [...document.querySelectorAll(".content")]
            .find(ul => ul.dataset.index === li.dataset.index)
                .classList.add("active");
            // content.classList.add("active");
        }
    </script>
</body>
</html>

示例图：

2. 经典轮播图案例

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .slider {
            max-width: 750px;
            min-width: 320px;
            margin: auto;
            padding: 0 10px;
        }
        .slider .imgs {
            /* 图片容器必须要有高度,否则下面图片不能正常显示 */
            height: 150px;
        }
        .slider .imgs img {
            /* 图片完全充满父级空间显示 */
            height: 100%;
            width: 100%;
            /* 图片带有圆角 */
            border-radius: 10px;
            /* 默认图片全部隐藏,只有有active的图片才显示 */
            display: none;
        }
        /* 默认显示第一张 */
        .slider .imgs img.active {
            display: block;
        }
        /* 轮播图按钮组 */
        .slider .btns {
            /* 按钮水平一排显示,用flex,且水平居中 */
            display: flex;
            place-content: center;
        }
        .slider .btns span {
            /* 按钮宽高相同,确定显示成一个正圆 */
            width: 8px;
            height: 8px;
            /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
            background-color: rgba(255, 255, 255, 0.4);
            /* 50%可确保显示为正圆 */
            border-radius: 50%;
            /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
            margin: -12px 3px 5px;
        }
        .slider .btns span.active {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="slider">
        <!-- 图片容器 -->
        <div class="imgs">
            <!-- 轮播图默认从第一张开始显示 -->
            <a href=""><img src="./images/banner1.jpg" alt="" data-index="1" class="active" /></a>
            <a href=""><img src="./images/banner2.jpg" alt="" data-index="2" /></a>
            <a href=""><img src="./images/banner3.png" alt="" data-index="3" /></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>
        </div>
    </div>
    <script>
        // 1. 获取全部图片与按钮
        const imgs = document.querySelectorAll(".slider .imgs img");
        const btns = document.querySelectorAll(".slider .btns span");
        // 2. 设置激活状态
        function setActive() {
            // 1. 清空图片所按钮的激活状态
            imgs.forEach(img => img.classList.remove("active"));
            btns.forEach(btn => btn.classList.remove("active"));
            // 2.根据按钮的索引来确定应该将哪一张图片显示出来
            event.target.classList.add("active");
            imgs.forEach(img => {
                if (img.dataset.index === event.target.dataset.index) {
                    img.classList.add("active");
                }
            });
        }
        // 3. 定时播放
        // 用到"事件派发器",来自动的模拟手工点击
        setInterval(
            function(arr) {
                // 使这个数组首尾相接实现无限循环效果
                let i = arr.shift();
                btns[i].dispatchEvent(new Event("click"));
                arr.push(i);
            },
            2000,
            Object.keys(btns)
        );
    </script>
</body>
</html>