js第十二题
- IT业界
- 2025-09-04 18:18:02
题十二：轮播图
要求：
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();
