html+js轮播图
- 开源代码
- 2025-09-22 07:09:01
<!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=" image.meiye.art/pic_1631411429199mjIE7yxqjZxWNdOvWLxL2?imageMogr2/thumbnail/640x/interlace/1" alt="Image 1"> <img src=" image.meiye.art/pic_16324946992753vSLEv0P2s-1PY95ynOZn?imageMogr2/thumbnail/640x/interlace/1" alt="Image 2"> <img src=" 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>
html+js轮播图由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“html+js轮播图”
上一篇
信息学奥赛一本通（C++版)
下一篇
Seaborn知识总结
