JS 轮播图

JS 轮播图一般采用图片切换的方式，实现方法有多种，以下是其中一种比较简单的实现方式：

1. HTML 结构

<div class="slider">
  <ul class="slides">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
</div>

2. CSS 样式

.slider {
  position: relative;
  overflow: hidden;
}
.slides {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.slides li {
  float: left;
  width: 33.333%;
}

3. JS 代码

var slider = document.querySelector('.slider');
var slides = slider.querySelector('.slides');
var slideWidth = slider.offsetWidth / 3; // 每张图片的宽度
var currentSlide = 0;
var isAnimating = false;

function nextSlide() {
  if (!isAnimating) {
    currentSlide++;
    if (currentSlide > slides.children.length - 1) {
      currentSlide = 0;
    }
    animateSlides(-currentSlide * slideWidth);
  }
}

function animateSlides(offset) {
  isAnimating = true;
  var duration = 500; // 动画时长
  var interval = 10; // 每帧间隔时间
  var frame = 0;
  var frames = duration / interval;
  var delta = (offset - slides.offsetLeft) / frames;

  function tick() {
    slides.style.left = slides.offsetLeft + delta + 'px';
    frame++;
    if (frame < frames) {
      setTimeout(tick, interval);
    } else {
      if (currentSlide === 0) {
        slides.style.left = -slideWidth + 'px';
      } else if (currentSlide === slides.children.length - 1) {
        slides.style.left = -(slides.children.length - 2) * slideWidth + 'px';
      }
      isAnimating = false;
    }
  }

  tick();
}

setInterval(nextSlide, 3000); // 自动播放

上面的代码实现了一个自动播放的轮播图，每隔 3 秒钟自动切换一张图片。你可以根据需要自定义样式和动画效果，实现更加丰富的轮播图。