js实现轮播图效果 纯js实现图片自动切换

下面我将为您详细讲解如何使用纯js实现轮播图效果，并提供两个示例。

轮播图效果的实现

核心思路

实现轮播图效果，主要的核心思路是使用定时器（setInterval）对图片进行自动切换，并且在用户触发左右切换按钮时进行图片的手动切换。

具体来说，实现图片的自动切换需要以下步骤：

1. 获取图片容器和图片列表的宽度、当前图片的索引
2. 使用定时器不断地切换图片，每隔一定的时间，将图片列表向左偏移一个图片的宽度，同时将当前图片的索引加1
3. 当当前图片的索引大于等于图片列表的长度时，将图片列表设置为初始状态，将当前图片的索引置为0

实现图片的手动切换需要以下步骤：

1. 给左右切换按钮添加点击事件监听器
2. 在事件监听器中根据点击按钮的不同，调整当前图片索引的值
3. 利用当前索引的值重新计算图片列表的偏移量并实现偏移

示例1：基本轮播图实现

下面提供一个基本的轮播图实现示例。这个轮播图包含两个按钮，即左右切换按钮，同时可以自动轮播。在轮播期间，用户可以通过点击左右切换按钮实现图片的手动切换。

HTML 代码：

<div class="slider">
  <ul class="slider__list">
    <li class="slider__item"><img src="img/01.jpg" alt=""></li>
    <li class="slider__item"><img src="img/02.jpg" alt=""></li>
    <li class="slider__item"><img src="img/03.jpg" alt=""></li>
    <li class="slider__item"><img src="img/04.jpg" alt=""></li>
    <li class="slider__item"><img src="img/05.jpg" alt=""></li>
  </ul>
  <button class="slider__btn slider__btn--prev">上一张</button>
  <button class="slider__btn slider__btn--next">下一张</button>
</div>

CSS 代码：

.slider {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.slider__list {
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 300px;
  margin: 0;
  padding: 0;
  transition: all 500ms ease;
}

.slider__item {
  position: relative;
  float: left;
  width: 400px;
  height: 300px;
  list-style: none;
}

JS 代码：

// 获取相关元素
const slider = document.querySelector('.slider');
const sliderList = slider.querySelector('.slider__list');
const sliderItem = slider.querySelectorAll('.slider__item');
const sliderBtnPrev = slider.querySelector('.slider__btn--prev');
const sliderBtnNext = slider.querySelector('.slider__btn--next');

// 轮播图参数设置
const imgWidth = sliderItem[0].offsetWidth; // 图片宽度
let currentImgIndex = 0; // 当前显示的图片索引
let timerId = null; // 定时器id

// 启动轮播
function startSlider() {
  timerId = setInterval(() => {
    currentImgIndex++;
    if (currentImgIndex >= sliderItem.length) {
      currentImgIndex = 0;
    }
    const offset = -currentImgIndex * imgWidth;
    sliderList.style.transform = `translateX(${offset}px)`;
  }, 3000);
}

// 停止轮播
function stopSlider() {
  clearInterval(timerId);
}

// 注册事件监听器
slider.addEventListener('mouseover', stopSlider);
slider.addEventListener('mouseout', startSlider);

sliderBtnPrev.addEventListener('click', () => {
  currentImgIndex--;
  if (currentImgIndex < 0) {
    currentImgIndex = sliderItem.length - 1;
  }
  const offset = -currentImgIndex * imgWidth;
  sliderList.style.transform = `translateX(${offset}px)`;
});

sliderBtnNext.addEventListener('click', () => {
  currentImgIndex++;
  if (currentImgIndex >= sliderItem.length) {
    currentImgIndex = 0;
  }
  const offset = -currentImgIndex * imgWidth;
  sliderList.style.transform = `translateX(${offset}px)`;
});

startSlider();

以上代码中，startSlider 函数用于启动轮播定时器，stopSlider 函数用于停止定时器。使用事件监听器在鼠标移入、移出时启动/停止轮播。在左右按钮的点击事件监听器中，根据点击不同的按钮调整当前图片的索引，并计算新的偏移量。

示例2：带自动滑动缓动的轮播图实现

下面提供一个带有自动滑动缓动效果的实现示例。在这个示例中，轮播图的移动不是突兀的，而是带有一定的滑动缓动效果。除此之外，这个轮播图和上一个示例基本相同。

HTML 代码：

<div class="slider">
  <ul class="slider__list">
    <li class="slider__item"><img src="img/01.jpg" alt=""></li>
    <li class="slider__item"><img src="img/02.jpg" alt=""></li>
    <li class="slider__item"><img src="img/03.jpg" alt=""></li>
    <li class="slider__item"><img src="img/04.jpg" alt=""></li>
    <li class="slider__item"><img src="img/05.jpg" alt=""></li>
  </ul>
  <button class="slider__btn slider__btn--prev">上一张</button>
  <button class="slider__btn slider__btn--next">下一张</button>
</div>

CSS 代码：

.slider {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.slider__list {
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 300px;
  margin: 0;
  padding: 0;
  transition: all 0.5s ease-out;
}

.slider__item {
  position: relative;
  float: left;
  width: 400px;
  height: 300px;
  list-style: none;
}

JS 代码：

// 获取相关元素
const slider = document.querySelector('.slider');
const sliderList = slider.querySelector('.slider__list');
const sliderItem = slider.querySelectorAll('.slider__item');
const sliderBtnPrev = slider.querySelector('.slider__btn--prev');
const sliderBtnNext = slider.querySelector('.slider__btn--next');

// 启动轮播
const imgWidth = sliderItem[0].offsetWidth; // 图片宽度
let currentImgIndex = 0; // 当前显示的图片索引
let timerId = null; // 定时器id

function slide() {
  currentImgIndex++;
  if (currentImgIndex >= sliderItem.length) {
    currentImgIndex = 0;
  }
  const offset = -currentImgIndex * imgWidth;
  sliderList.style.transform = `translateX(${offset}px)`;
}

function startSlider() {
  timerId = setInterval(() => {
    slide();
    sliderList.style.transition = 'all 0.5s ease-out';
  }, 3000);
}

// 停止轮播
function stopSlider() {
  clearInterval(timerId);
}

// 注册事件监听器
slider.addEventListener('mouseover', stopSlider);
slider.addEventListener('mouseout', () => {
  startSlider();
  sliderList.style.transition = 'none';
});

sliderBtnPrev.addEventListener('click', () => {
  currentImgIndex--;
  if (currentImgIndex < 0) {
    currentImgIndex = sliderItem.length - 1;
  }
  const offset = -currentImgIndex * imgWidth;
  sliderList.style.transform = `translateX(${offset}px)`;
  sliderList.style.transition = 'all 0.5s ease-out';
});

sliderBtnNext.addEventListener('click', () => {
  slide();
  sliderList.style.transition = 'all 0.5s ease-out';
});

startSlider();

以上代码中，slide 函数用于实现图片的自动切换。在启动定时器时，除了执行 slide 函数外，还将轮播图容器的 transition 属性设为缓动效果。在鼠标移出时，将 transition 属性设为 none，这样轮播图就可以在切换时没有缓动效果。