代码在文章最后面（含图片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://www.qianduange.cn/upload/article/8319afaf350346a08a4d51b65638e39d.png', 'https://www.qianduange.cn/upload/article/6b91-ihyxcrp9562392.jpg', 'https://www.qianduange.cn/upload/article/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>
