前端通过JS实现轮播图效果

ling小陈

于 2021-07-18 08:56:23 发布

阅读量989

点赞数 3

分类专栏：轮播图文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/ling123488999/article/details/118872952

版权

本文介绍了如何使用JavaScript在网页中实现自动轮播图效果，包括图片和文字展示，以及图片数量指示器的实现。示例代码展示了HTML结构和JS逻辑，使得添加更多图片无需修改JS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在打开网页时，特别是新闻展示的网站中，我们最常见的就是轮播图，有图片和文字的展示，不用自己操作就能自己依次循环展示多张图片。此篇文章就是介绍在写网站时，如何实现轮播图效果。

示例中的轮播图主要展示图片，图片上展示的文字内容以及用于显示图片个数的小圆点。

话不多说，直接上效果图在这里插入图片描述

图片展示很清楚，不用多解释，下边直接上代码吧！！！
页面展示——HTML

<div class="carousel">
					<ul class="list">
						<li class="item active"><img src="../images/bg1.jpg" /><span class="text">开会开会开会</span></li>
						<li class="item"><img src="../images/bj111.jpg" /><span class="text">今天开会</span></li>
						<li class="item"><img src="../images/bg11.jpg" /><span class="text">今天开会</span></li>
						<li class="item"><img src="../images/bj4.jpg" /><span class="text">今天开会</span></li>
						<li class="item"><img src="../images/bjj.jpeg" /><span class