js如何实现轮播图效果

<div class="carousel-container">     <div class="carousel-wrapper">         @@##@@         @@##@@         @@##@@     </div>     <button class="prev-btn">‹</button>     <button class="next-btn">›</button>     <div class="dots-container">         <span class="dot active"></span>         <span class="dot"></span>         <span class="dot"></span>     </div> </div>

carousel-wrapper

display: flex

.carousel-container {     width: 80%; /* 示例宽度 */     max-width: 960px;     margin: 20px auto;     overflow: hidden; /* 隐藏超出容器的图片 */     position: relative;     border-radius: 8px;     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }  .carousel-wrapper {     display: flex; /* 让图片横向排列 */     width: 300%; /* 假设有3张图片，每张100% */     transition: transform 0.5s ease-in-out; /* 平滑过渡效果 */ }  .carousel-wrapper img {     width: 100%; /* 每张图片占据wrapper的1/N，这里是1/3 */     flex-shrink: 0; /* 防止图片缩小 */     display: block; /* 移除图片默认的底部间隙 */     height: auto; /* 保持图片比例 */ }  .prev-btn, .next-btn {     position: absolute;     top: 50%;     transform: translateY(-50%);     background-color: rgba(0, 0, 0, 0.5);     color: white;     border: none;     padding: 10px 15px;     cursor: pointer;     font-size: 24px;     border-radius: 4px;     z-index: 10;     opacity: 0.8;     transition: opacity 0.3s; }  .prev-btn:hover, .next-btn:hover {     opacity: 1; }  .prev-btn {     left: 10px; }  .next-btn {     right: 10px; }  .dots-container {     position: absolute;     bottom: 10px;     left: 50%;     transform: translateX(-50%);     display: flex;     gap: 8px; }  .dot {     width: 10px;     height: 10px;     background-color: rgba(255, 255, 255, 0.7);     border-radius: 50%;     cursor: pointer;     transition: background-color 0.3s; }  .dot.active {     background-color: #fff; }

document.addEventListener('DOMContentLoaded', () => {     const wrapper = document.querySelector('.carousel-wrapper');     const slides = document.querySelectorAll('.carousel-wrapper img');     const prevBtn = document.querySelector('.prev-btn');     const nextBtn = document.querySelector('.next-btn');     const dotsContainer = document.querySelector('.dots-container');     let dots = [];      const totalSlides = slides.length;     let currentIndex = 0;     let autoPlayInterval;      // 根据图片数量动态生成指示点     slides.forEach((_, index) => {         const dot = document.createElement('span');         dot.classList.add('dot');         if (index === 0) {             dot.classList.add('active');         }         dot.addEventListener('click', () => {             goToSlide(index);             resetAutoPlay();         });         dotsContainer.appendChild(dot);         dots.push(dot);     });      // 调整wrapper的宽度以适应所有图片     wrapper.style.width = `${totalSlides * 100}%`;      // 核心函数：根据索引显示对应图片     function goToSlide(index) {         if (index < 0) {             currentIndex = totalSlides - 1; // 循环到最后一张         } else if (index >= totalSlides) {             currentIndex = 0; // 循环到第一张         } else {             currentIndex = index;         }          // 使用 transform 属性进行位移         wrapper.style.transform = `translateX(-${currentIndex * (100 / totalSlides)}%)`;          // 更新指示点状态         dots.forEach((dot, i) => {             if (i === currentIndex) {                 dot.classList.add('active');             } else {                 dot.classList.remove('active');             }         });     }      // 切换到下一张     function nextSlide() {         goToSlide(currentIndex + 1);     }      // 切换到上一张     function prevSlide() {         goToSlide(currentIndex - 1);     }      // 自动播放功能     function startAutoPlay() {         autoPlayInterval = setInterval(nextSlide, 3000); // 每3秒切换一次     }      // 停止并重新启动自动播放     function resetAutoPlay() {         clearInterval(autoPlayInterval);         startAutoPlay();     }      // 绑定事件监听器     prevBtn.addEventListener('click', () => {         prevSlide();         resetAutoPlay(); // 用户点击后重置自动播放计时     });      nextBtn.addEventListener('click', () => {         nextSlide();         resetAutoPlay();     });      // 鼠标悬停时暂停自动播放     wrapper.closest('.carousel-container').addEventListener('mouseenter', () => {         clearInterval(autoPlayInterval);     });      wrapper.closest('.carousel-container').addEventListener('mouseleave', () => {         startAutoPlay();     });      // 初始化自动播放     startAutoPlay(); });

scroll

ease-in-out

/* 示例：在小屏幕上调整按钮大小 */ @media (max-width: 768px) {     .prev-btn, .next-btn {         padding: 8px 12px;         font-size: 20px;     } }  /* 示例：在更小屏幕上隐藏按钮，只保留触摸滑动 */ @media (max-width: 480px) {     .prev-btn, .next-btn {         display: none;     } }

window.onresize

translateX(-${currentIndex * (100 / totalSlides)}%)

// 如果有需要根据窗口大小调整的JS逻辑，可以在这里添加 window.addEventListener('resize', () => {     // 重新计算并应用当前transform，以防万一     // goToSlide(currentIndex); // 重新调用一次，确保位置正确 });

// 在DOMContentLoaded回调内部添加 let startX = 0; let endX = 0; let isSwiping = false; // 标记是否正在滑动  wrapper.addEventListener('touchstart', (e) => {     startX = e.touches[0].clientX;     isSwiping = true;     wrapper.style.transition = 'none'; // 触摸时暂时移除过渡，实现实时跟随     clearInterval(autoPlayInterval); // 触摸时暂停自动播放 });  wrapper.addEventListener('touchmove', (e) => {     if (!isSwiping) return;     endX = e.touches[0].clientX;     const deltaX = endX - startX;     // 实时更新位置，让图片跟着手指移动     // 这里需要根据实际情况调整 translateX 的计算     // 比如：当前图片位置 + deltaX / wrapper.offsetWidth * 100%     // 复杂一点的实现可能需要计算百分比位移     // 简单起见，我们只在 touchend 时处理     e.preventDefault(); // 阻止页面滚动 });  wrapper.addEventListener('touchend', () => {     if (!isSwiping) return;     isSwiping = false;     wrapper.style.transition = 'transform 0.5s ease-in-out'; // 恢复过渡      const swipeThreshold = 50; // 最小滑动距离阈值     const deltaX = endX - startX;      if (deltaX > swipeThreshold) {         prevSlide(); // 向右滑动，显示上一张     } else if (deltaX < -swipeThreshold) {         nextSlide(); // 向左滑动，显示下一张     } else {         goToSlide(currentIndex); // 未达到阈值，回到当前图片     }     resetAutoPlay(); // 触摸结束后重新启动自动播放 });