讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > html教程 >

正文

0

0

纯JavaScript实现定时内容轮播与切换效果

碧海醫心

碧海醫心

发布时间：2025-11-19 14:33:31

|

342人浏览过

|

来源于php中文网

原创

纯JavaScript实现定时内容轮播与切换效果

本教程将指导您如何使用纯javascript和css创建一个简单的内容轮播组件。通过定时器`setinterval`和动态添加/移除css类，实现每隔n秒自动切换显示一个内容区块，从而构建一个基础且功能实用的轮播图效果。

引言

在现代网页设计中，内容轮播（Carousel）是一种常见且高效的展示方式，它允许在有限的空间内循环展示多个图片、文本或其他内容。本教程将详细介绍如何利用原生JavaScript结合CSS，实现一个每隔固定时间自动切换显示不同内容区块的轮播效果。我们将通过一个简单的示例，逐步构建其HTML结构、CSS样式和核心JavaScript逻辑。

核心原理

实现定时内容轮播主要依赖以下几个核心概念：

  1. HTML 结构：容器与子项
    • 一个父容器（例如 div.wrapper）用于包裹所有待轮播的内容项。
    • 每个内容项（例如 div.slide）作为父容器的直接子元素。
  2. CSS 控制：显示与隐藏
    • 通过CSS类（例如 .hidden）来控制内容项的显示和隐藏，通常使用 display: none; 进行隐藏。
    • 默认情况下，除了第一个内容项，其他内容项都应设置为隐藏。
  3. JavaScript 逻辑：定时器与索引管理
    • 获取所有内容项元素，并将其存储在一个数组中。
    • 使用 setInterval() 函数创建一个定时器，每隔预设的时间间隔执行一次切换逻辑。
    • 维护一个当前显示内容项的索引 (currIndex)。
    • 在每次定时器触发时，遍历所有内容项：
      • 根据 currIndex 判断当前应该显示哪个内容项，并移除其 .hidden 类。
      • 隐藏其他所有内容项，即添加 .hidden 类。
    • 更新 currIndex，并通过模运算 (%) 确保索引在内容项数量范围内循环。

实现步骤

我们将通过一个具体的例子来演示如何构建这个定时内容轮播。

1. 构建HTML结构

首先，定义轮播组件的HTML结构。我们使用一个 div.wrapper 作为所有幻灯片的容器，并在其中放置多个 div.slide 元素。为了演示，我们给每个幻灯片添加不同的图片布局。初始时，除了第一个幻灯片，其他都通过 hidden 类进行隐藏。

立即学习“Java免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时内容轮播</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="slide single">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片1">
        </div>

        <div class="slide split hidden">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片2-1">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片2-2">
        </div>

        <div class="slide quad hidden">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-1">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-2">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-3">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-4">
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. 定义CSS样式

接下来，为轮播组件添加必要的CSS样式。这包括基本的页面布局、幻灯片容器和内容项的样式，以及用于控制显示/隐藏的核心 .hidden 类。

body {
    padding: 0;
    margin: 0;
    overflow: hidden; /* 防止滚动条 */
}

.wrapper {
    /* 容器样式，根据需要调整 */
}

.slide {
    display: flex; /* 使用Flexbox布局子图片 */
    flex-direction: column; /* 垂直排列 */
    flex-wrap: wrap; /* 允许换行 */
    height: 100vh; /* 占据整个视口高度 */
    width: 100vw; /* 占据整个视口宽度 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    position: absolute; /* 使幻灯片可以堆叠 */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out; /* 为平滑过渡添加过渡效果 */
    opacity: 1; /* 默认显示 */
}

img {
    outline: solid 5px #fff; /* 图片边框 */
    box-sizing: border-box; /* 边框包含在宽度内 */
}

/* 不同布局的幻灯片样式 */
.single img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆盖整个区域 */
}

.split img {
    width: 50%;
    height: 100%;
    object-fit: cover;
}

.quad img {
    width: 50%;
    height: 50%;
    object-fit: cover;
}

/* 隐藏类，用于切换显示 */
.hidden {
    display: none; /* 直接隐藏 */
    /* 如果需要平滑过渡，可以考虑使用 opacity: 0; visibility: hidden; */
    /* opacity: 0;
    visibility: hidden; */
}

注意：在CSS中，display: none; 会立即隐藏元素，不提供平滑过渡效果。如果需要平滑的淡入淡出效果，可以考虑将 .hidden 类改为 opacity: 0; visibility: hidden;，并在 .slide 上添加 transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;。但为了与原始解决方案保持一致，我们仍使用 display: none;。

MaxAI
MaxAI

MaxAI.me是一款功能强大的浏览器AI插件，集成了多种AI模型。

下载

3. 编写JavaScript逻辑

这是实现定时轮播的核心部分。我们将获取所有幻灯片元素，并使用 setInterval 定时器来控制它们的显示与隐藏。

// 获取所有幻灯片元素
const wrapper = document.querySelector(".wrapper");
const childsArray = Array.from(wrapper.children); // 将HTMLCollection转换为数组

let currIndex = 0; // 当前显示的幻灯片索引

// 初始显示第一个幻灯片，隐藏其他
childsArray.forEach((slider, i) => {
    if (i === currIndex) {
        slider.classList.remove("hidden");
    } else {
        slider.classList.add("hidden");
    }
});

// 设置定时器，每4000毫秒（4秒）切换一次幻灯片
setInterval(() => {
    childsArray.forEach((slider, i) => {
        // 判断当前幻灯片是否应该显示
        // currIndex % childsArray.length 确保索引在有效范围内循环
        if (i === currIndex % childsArray.length) {
            slider.classList.remove("hidden"); // 显示当前幻灯片
        } else {
            slider.classList.add("hidden"); // 隐藏其他幻灯片
        }
    });
    currIndex++; // 索引递增，准备显示下一个幻灯片
}, 4000); // 切换间隔时间为4秒

完整代码示例

将上述HTML、CSS和JavaScript代码分别保存为 index.html、style.css 和 script.js 文件，并确保它们在同一目录下。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时内容轮播</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="slide single">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片1">
        </div>

        <div class="slide split hidden">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片2-1">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片2-2">
        </div>

        <div class="slide quad hidden">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-1">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-2">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-3">
            <img src="https://dummyimage.com/3840x2160/000/fff" alt="幻灯片3-4">
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

style.css

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.wrapper {
    /* 容器样式，根据需要调整 */
}

.slide {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out; /* 为平滑过渡添加过渡效果 */
    opacity: 1;
}

img {
    outline: solid 5px #fff;
    box-sizing: border-box;
}

.single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split img {
    width: 50%;
    height: 100%;
    object-fit: cover;
}

.quad img {
    width: 50%;
    height: 50%;
    object-fit: cover;
}

.hidden {
    display: none;
}

script.js

const wrapper = document.querySelector(".wrapper");
const childsArray = Array.from(wrapper.children);

let currIndex = 0;

childsArray.forEach((slider, i) => {
    if (i === currIndex) {
        slider.classList.remove("hidden");
    } else {
        slider.classList.add("hidden");
    }
});

setInterval(() => {
    childsArray.forEach((slider, i) => {
        if (i === currIndex % childsArray.length) {
            slider.classList.remove("hidden");
        } else {
            slider.classList.add("hidden");
        }
    });
    currIndex++;
}, 4000);

功能扩展与注意事项

  • 平滑过渡效果: 如果希望幻灯片切换时有淡入淡出的平滑效果，而不是生硬的显示/隐藏，可以将CSS中的 .hidden 类定义改为 opacity: 0; visibility: hidden;，并在 .slide 类中添加 transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;。这样，当 opacity 从0变为1时，会有过渡动画。
  • 手动导航: 可以添加“上一张/下一张”按钮或分页指示器，让用户能够手动控制幻灯片切换。
  • 鼠标交互: 考虑在鼠标悬停在轮播图上时暂停自动播放，移开时恢复播放，以提升用户体验。这可以通过 mouseover 和 mouseout 事件结合 clearInterval() 和 setInterval() 来实现。
  • 响应式设计: 确保幻灯片内容在不同屏幕尺寸下都能良好显示，可能需要调整图片尺寸、Flexbox布局等。
  • 性能优化: 对于包含大量高分辨率图片的轮播图，考虑图片懒加载（Lazy Loading）以优化页面加载性能。
  • 可访问性: 为图片添加 alt 属性，为轮播组件添加适当的ARIA属性，以提高对屏幕阅读器等辅助技术的支持。

总结

本教程详细介绍了如何使用纯JavaScript和CSS构建一个基础的定时内容轮播组件。通过管理DOM元素、动态添加/移除CSS类以及利用 setInterval 定时器，我们实现了每隔固定时间自动切换显示内容的功能。这个基础实现为进一步的功能扩展和优化提供了坚实的基础，您可以根据实际需求进行定制和改进。

相关文章

SublimeText插件怎么装HTML_Sublime插件操作【操作】

HTML浏览器支持旧标签怎么处理_HTML页面兼容汇总【详解】

如何为未选中的复选框与单选按钮自定义背景色（纯 CSS 实现）

如何用纯 CSS 自定义未选中复选框与单选按钮的背景色

HTML Number Input 默认起始值设为 0 的解决方案

相关标签:

css javascript java html js seo 懒加载 ssl 网页设计 响应式设计 css样式 循环 JS 事件 dom display transition 性能优化

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：动态生成表单元素名称的 JavaScript 教程 下一篇：Python f-string 中嵌入 JavaScript 括号的转义技巧

作者最新文章

如何在桌面端调试移动设备触摸事件

2026-03-15 14:02

Camel SFTP 文件下载后如何避免重复拉取：正确配置文件处理策略

2026-03-15 14:04

如何在 Hibernate 中安全更新携带 ID 的分离实体

2026-03-15 14:07

如何实现侧边栏展开时主内容区域自适应剩余空间宽度

2026-03-15 14:12

苹果iPhone15怎么关闭APP自动更新

2026-03-15 14:14

PHP 数组按指定元素位置循环重排序教程

2026-03-15 14:20

如何在 Go 中正确构建并返回 JSON 响应

2026-03-15 14:24

如何实现点击模态框外部区域自动关闭功能

2026-03-15 14:29

Balkan FamilyTree JS：当前版本无法展开完整家谱树的官方说明

2026-03-15 14:35

如何让关闭按钮支持键盘操作（空格/回车触发）并符合无障碍标准

2026-03-15 14:50

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发AI聊天问答
豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发AI大模型
WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

AI办公学习Agent智能体
腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文档处理Excel 表格
文心一言
文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发AI文本写作
讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作
即梦AI
即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成
ChatGPT
ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发AI文本写作
智谱清言 - 免费全能的AI助手
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI编程开发Agent智能体

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

531

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

761

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

6309

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

494

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

221

2023.09.04

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

240

2023.09.14

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法，包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求，灵活地截取字符串的不同部分。在实际开发中，根据具体情况选择合适的方法进行字符串截取，能够提高代码的效率和可读性 。

303

2023.09.21

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。

69

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
php商城系统
淘源码商城PHP淘宝查信誉
PHP房产程序[BBWPS]
PHP简约自动发卡平台个人版
ERMEB域名PHP离线网络授权系统
Difeye-敏捷的轻量级PHP框架
大泉州汽车网PHP整站程序

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 43.4万人学习

最新文章

更多
html5图片怎么居中_html5图像居中对齐【技巧】
HTML颜色输入怎么实现_HTML颜色输入技巧【技巧】
HTML Number Input 默认值设为 0 的解决方案
HTML文件上传按钮怎么实现_HTMLfile输入类型操作说明【说明】
HTML表单高级技巧_HTML表单高级使用教程【教程】
HTML表单数据列表怎么创建_HTMLdatalist元素操作【操作】
Angular 中父子组件通过 ngFor 传递空数组状态的正确实践
HTML颜色属性怎么改_背景颜色设置技巧【技巧】
VSCode怎么自动补全HTML_编辑器智能功能技巧【技巧】
HTML跨版本兼容怎么办_旧新HTML差异方法【方法】
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部