js实现轮播海报

实现轮播海报的基本思路

使用JavaScript实现轮播海报的核心在于通过定时器或用户交互切换展示的图片，通常结合CSS动画实现平滑过渡效果。以下是两种常见实现方式：

纯JavaScript实现基础轮播

创建HTML结构，包含轮播容器和图片列表：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</div>

添加CSS样式控制布局和过渡效果：

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slides img {
  width: 100%;
  flex-shrink: 0;
}

JavaScript实现自动轮播逻辑：

const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
let currentIndex = 0;

function nextSlide() {
  currentIndex = (currentIndex + 1) % images.length;
  slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}

setInterval(nextSlide, 3000);

使用CSS动画增强效果

结合CSS关键帧动画实现更复杂的过渡效果：

@keyframes fade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.slides img {
  position: absolute;
  animation: fade 12s infinite;
}
.slides img:nth-child(1) { animation-delay: 0s; }
.slides img:nth-child(2) { animation-delay: 4s; }
.slides img:nth-child(3) { animation-delay: 8s; }

添加导航控制按钮

扩展功能添加手动控制按钮：

<button class="prev">Previous</button>
<button class="next">Next</button>

JavaScript添加事件监听：

document.querySelector('.next').addEventListener('click', nextSlide);

document.querySelector('.prev').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  slides.style.transform = `translateX(-${currentIndex * 100}%)`;
});

响应式布局适配

通过JavaScript动态计算轮播尺寸：

function resizeSlider() {
  const sliderWidth = document.querySelector('.slider').offsetWidth;
  document.querySelectorAll('.slides img').forEach(img => {
    img.style.width = `${sliderWidth}px`;
  });
}

window.addEventListener('resize', resizeSlider);
resizeSlider();

无限循环优化

修改轮播逻辑实现无缝循环：

function nextSlide() {
  currentIndex++;
  slides.style.transition = 'transform 0.5s ease';
  slides.style.transform = `translateX(-${currentIndex * 100}%)`;

  if(currentIndex >= images.length) {
    setTimeout(() => {
      slides.style.transition = 'none';
      currentIndex = 0;
      slides.style.transform = 'translateX(0)';
    }, 500);
  }
}

以上方案可根据实际需求组合使用，如需更复杂效果可考虑使用Swiper.js等专业轮播库。