JS实现轮播图效果的3种简单方法

1. 利用定时器来实现轮播图效果

首先，我们需要先定义图片数组，以便进行遍历，设置一个计数器，每隔一段时间，计数器加1，通过计数器来更改图片。

HTML代码：

<div id="slider">
  <img src="img1.jpg" alt="图片一"/>
  <img src="img2.jpg" alt="图片二"/>
  <img src="img3.jpg" alt="图片三"/>
</div>

JS代码：

let slider = document.getElementById('slider');
let count = 0;
let images = ['img1.jpg','img2.jpg','img3.jpg'];
setInterval(() => {
  slider.src = images[count];
  count++;
  if(count >= images.length) count = 0;
}, 2000);

2. 利用 CSS Animation 实现轮播图效果

CSS Animation 支持在不使用 JavaScript 的情况下实现动画效果。下面是一个示例代码：

HTML代码：

<div class="slider">
  <img class="slide-item" src="img1.jpg" alt="图片一"/>
  <img class="slide-item" src="img2.jpg" alt="图片二"/>
  <img class="slide-item" src="img3.jpg" alt="图片三"/>
</div>

CSS代码：

.slider {
  position: relative;
}
.slide-item {
  position: absolute;
  animation-name: slide;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  opacity: 0;
}
@keyframes slide {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

该代码实现了三张图片的淡入淡出效果，每张图片停留时间为2秒。

3. 使用jQuery库实现轮播图效果

jQuery 库是一个非常流行的 JavaScript 库，它可以在轻松地实现一个类似幻灯片的轮播图效果。

HTML代码：

<div id="slider" class="slider">
  <ul class="slider-list">
    <li><img src="img1.jpg" alt="图片一"/></li>
    <li><img src="img2.jpg" alt="图片二"/></li>
    <li><img src="img3.jpg" alt="图片三"/></li>
  </ul>
</div>

JS代码：

$(function() {
  let count = 1;
  let sliderList = $('.slider-list');
  let sliderItems = $('.slider-list li');
  let sliderWidth = sliderItems.width();

  $('.slider-list').css('width', sliderWidth * sliderItems.length);

  setInterval(() => {
    sliderList.animate({'margin-left' : '-=' + sliderWidth}, 1000, () => {
      count++;
      if(count == sliderItems.length + 1) {
        count = 1;
        $('.slider-list').css('margin-left', 0);
      }
    });
  }, 2000);
});

该代码使用了 jQuery 动画函数 animate()，该函数可以非常方便地实现元素滑动的效果。将 margin-left 设置成正数，则向右滑动；将 margin-left 设置成负数，则向左滑动。