政府网站的微信微博建设/百度系优化
题十二：轮播图
要求：
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。
html
<body><div class="carousel"><div class="slides"><div class="slide active"><img src="./static/QQ20250120-095415.png" alt="项目1"></div><div class="slide"><img src="./js答辩/static/4034970a304e251f49011866b586c9177e3e53be - 副本.png" alt="项目2"></div><div class="slide"><img src="./js答辩/static/2025-new-year-message-cn.jpg" alt="项目3"></div></div><div class="controls"><div class="arrow prev">❮</div><div class="arrow next">❯</div></div><div class="dots"></div></div>css
* {margin: 0;padding: 0;box-sizing: border-box;}.carousel {position: relative;width: 1000px;height: 500px;margin: 50px auto;overflow: hidden;}.slides {position: relative;height: 100%;}.slide {position: absolute;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease;}.slide.active {opacity: 1;}.slide img {width: 100%;height: 100%;object-fit: cover;}.controls {position: absolute;top: 50%;transform: translateY(-50%);width: 100%;display: flex;justify-content: space-between;padding: 0 20px;opacity: 0;transition: opacity 0.3s;}.carousel:hover .controls {opacity: 1;}.arrow {cursor: pointer;font-size: 40px;color: white;}.dots {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;}.dot {width: 15px;height: 15px;border-radius: 50%;background: rgba(255, 255, 255, 0.5);cursor: pointer;transition: background 0.3s;}.dot.active {background: white;}js
const carousel = document.querySelector('.carousel');const slides = document.querySelectorAll('.slide');const dotsContainer = document.querySelector('.dots');const prevBtn = document.querySelector('.prev');const nextBtn = document.querySelector('.next');// 初始化小圆点slides.forEach((_, index) => {const dot = document.createElement('div');dot.classList.add('dot');if (index === 0) dot.classList.add('active');dot.addEventListener('click', () => goToSlide(index));dotsContainer.appendChild(dot);});const dots = document.querySelectorAll('.dot');let currentIndex = 0;let autoPlayTimer;// 自动播放function startAutoPlay() {autoPlayTimer = setInterval(() => {nextSlide();}, 3000);}// 切换幻灯片function goToSlide(index) {slides[currentIndex].classList.remove('active');dots[currentIndex].classList.remove('active');currentIndex = (index + slides.length) % slides.length;slides[currentIndex].classList.add('active');dots[currentIndex].classList.add('active');}function nextSlide() {goToSlide(currentIndex + 1);}function prevSlide() {goToSlide(currentIndex - 1);}// 事件监听prevBtn.addEventListener('click', prevSlide);nextBtn.addEventListener('click', nextSlide);// 鼠标交互carousel.addEventListener('mouseenter', () => {clearInterval(autoPlayTimer);});carousel.addEventListener('mouseleave', startAutoPlay);// 初始化自动播放startAutoPlay();