代码在文章最后面（含图片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">👈</button>
<button class="control-button" id="next-btn">👉</button>
</div>
<div class="indicator-container" id="indicators"></div>
</div>
<script>
const images = [
'https://q9.itc.cn/q_70/images03/20240715/8319afaf350346a08a4d51b65638e39d.png',
'https://n.sinaimg.cn/sinacn20191106ac/42/w500h342/20191106/6b91-ihyxcrp9562392.jpg',
'https://n.sinaimg.cn/news/transform/20170412/D-Ac-fyecfam0465124.jpg'
];
let currentIndex = 0;
function showImage(index) {
document.getElementById('carousel-image').src = images[index];
const indicators = document.getElementById('indicators').children;
for (let i = 0; i < indicators.length; i++) {
indicators[i].classList.remove('active-indicator');
}
indicators[index].classList.add('active-indicator');
}
function createIndicators() {
const indicatorContainer = document.getElementById('indicators');
for (let i = 0; i < images.length; i++) {
const indicator = document.createElement('div');
indicator.classList.add('indicator');
if (i === 0) {
indicator.classList.add('active-indicator');
}
indicatorContainer.appendChild(indicator);
}
}
function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
showImage(currentIndex);
}
function prevImage() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
showImage(currentIndex);
}
document.getElementById('next-btn').addEventListener('click', nextImage);
document.getElementById('prev-btn').addEventListener('click', prevImage);
// Auto-play functionality
setInterval(nextImage, 2000);
createIndicators();
showImage(currentIndex);
</script>
</body>
</html>
本文转载自: https://blog.csdn.net/w11111xxxl/article/details/140742524
版权归原作者 睿智的海鸥 所有， 如有侵权，请联系我们删除。
版权归原作者 睿智的海鸥 所有， 如有侵权，请联系我们删除。