代码在文章最后面（含图片URL）
实现功能
- 按向左按钮图片显示上一张
- 按向右按钮图片显示下一张
- 每隔2000毫秒显示下一张图
- 底部三个圆点显示当前的图片的编号
实现流程
- 初始化图片数组 创建一个包含图片URL的数组，轮播时会通过这个数组来切换图片。
- 创建当前索引变量 这个变量用来追踪当前显示的图片索引。
- 创建自动轮播图片函数 该函数负责更改轮播图中显示的图片，并根据当前索引更新指示器的状态。
- 创建指示器的函数 此函数在HTML中创建了与图片数量相同的指示器元素，并为第一个指示器添加了active-indicator类，以表示它是活动的。
- 下一张图片按钮 当用户点击“下一张”按钮时，这个函数会被触发。它将currentIndex加一，如果索引等于图片数组长度，则将索引重置为0，然后调用showImage函数来更新图片和指示器。
- 上一张图片按钮 当用户点击“上一张”按钮时，这个函数会被触发。它将currentIndex减一，如果索引小于0，则将索引设置为图片数组的最后一个元素的索引，然后调用showImage函数来更新图片和指示器。
- 创建事件监听器 将这些监听器绑定到“下一张”和“上一张”按钮上，当按钮被点击时，它们会调用相应的函数。
- 启动自动轮播 设置了一个定时器，每隔2000毫秒（2秒）调用一次
nextImage函数，从而实现图片的自动轮播。
ONGD：通过操作DOM元素，用CSS类来控制显示的图片和当前图片指示器的状态，实现了图片轮播。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Carousel</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.carousel {
position: relative;
width: 300px;
height: 200px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.carousel img {
width: 100%;
height: auto;
}
.controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10px;
}
.control-button {
background-color: white;
color: #333;
font-size: 20px;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.indicator-container {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.indicator {
background-color: #ccc;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.active-indicator {
background-color: black;
}
</style>
</head>
<body>
<div class="carousel">
<img src="" alt="Image" id="carousel-image">
<div class="controls">
<button class="control-button" id="prev-btn">
标签：indicator,轮播,JavaScript,索引,currentIndex,按钮,图片
From： https://blog.csdn.net/w11111xxxl/article/details/140742524