<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图示例</title><style>/* 基本样式 */body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;font-family: Arial, sans-serif;}/* 轮播图容器 */.carousel {width: 600px;height: 400px;position: relative;overflow: hidden;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}/* 图片容器 */.carousel-images {display: flex;width: 100%;height: 100%;transition: transform 0.5s ease-in-out;}/* 图片样式 */.carousel-images img {width: 100%;height: 100%;object-fit: cover;flex-shrink: 0;}/* 左右按钮 */.carousel-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer;font-size: 18px;border-radius: 50%;transition: background-color 0.3s ease;}.carousel-button:hover {background-color: rgba(0, 0, 0, 0.8);}/* 左按钮 */.carousel-button.prev {left: 10px;}/* 右按钮 */.carousel-button.next {right: 10px;}/* 指示器容器 */.carousel-indicators {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;gap: 5px;}/* 指示器样式 */.carousel-indicators span {width: 10px;height: 10px;background-color: rgba(255, 255, 255, 0.5);border-radius: 50%;cursor: pointer;transition: background-color 0.3s ease;}.carousel-indicators span.active {background-color: white;}</style>
</head>
<body><!-- 轮播图容器 --><div class="carousel"><!-- 图片容器 --><div class="carousel-images"><img src="https://image.meiye.art/pic_1631411429199mjIE7yxqjZxWNdOvWLxL2?imageMogr2/thumbnail/640x/interlace/1" alt="Image 1"><img src="https://image.meiye.art/pic_16324946992753vSLEv0P2s-1PY95ynOZn?imageMogr2/thumbnail/640x/interlace/1" alt="Image 2"><img src="https://image.meiye.art/pic_1628403749737?imageMogr2/thumbnail/640x/interlace/1" alt="Image 3"></div><!-- 左右按钮 --><button class="carousel-button prev"><</button><button class="carousel-button next">></button><!-- 指示器 --><div class="carousel-indicators"><span class="active"></span><span></span><span></span></div></div><script>// 获取元素const carouselImages = document.querySelector('.carousel-images');const prevButton = document.querySelector('.carousel-button.prev');const nextButton = document.querySelector('.carousel-button.next');const indicators = document.querySelectorAll('.carousel-indicators span');let currentIndex = 0; // 当前显示的图片索引const totalImages = carouselImages.children.length; // 图片总数// 更新指示器状态function updateIndicators() {indicators.forEach((indicator, index) => {indicator.classList.toggle('active', index === currentIndex);});}// 切换到指定图片function goToImage(index) {if (index < 0) {index = totalImages - 1; // 如果小于0，切换到最后一张} else if (index >= totalImages) {index = 0; // 如果超出范围，切换到第一张}currentIndex = index;carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;updateIndicators();}// 切换到上一张图片prevButton.addEventListener('click', () => {goToImage(currentIndex - 1);});// 切换到下一张图片nextButton.addEventListener('click', () => {goToImage(currentIndex + 1);});// 点击指示器切换图片indicators.forEach((indicator, index) => {indicator.addEventListener('click', () => {goToImage(index);});});// 自动播放let autoPlayInterval = setInterval(() => {goToImage(currentIndex + 1);}, 3000);// 鼠标悬停时停止自动播放const carousel = document.querySelector('.carousel');carousel.addEventListener('mouseenter', () => {clearInterval(autoPlayInterval);});// 鼠标离开时恢复自动播放carousel.addEventListener('mouseleave', () => {autoPlayInterval = setInterval(() => {goToImage(currentIndex + 1);}, 3000);});</script>
</body>
</html>
