原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

标题：原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】攻略

1. 确定页面结构

在实现轮播图之前，首先要确定页面结构。可以考虑使用如下结构：

<div class="carousel">
  <ul class="carousel-list">
    <li class="carousel-item"><img src="image1.jpg" alt="图片1"></li>
    <li class="carousel-item"><img src="image2.jpg" alt="图片2"></li>
    <li class="carousel-item"><img src="image3.jpg" alt="图片3"></li>
    <li class="carousel-item"><img src="image4.jpg" alt="图片4"></li>
  </ul>
  <ul class="carousel-dots">
    <li class="dot active"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
  <a href="#" class="arrow arrow-prev"></a>
  <a href="#" class="arrow arrow-next"></a>
</div>

上述代码中，.carousel为轮播图容器，.carousel-list为轮播图列表，.carousel-item为轮播项，.carousel-dots为轮播点列表，.dot为轮播点，.active为激活态的轮播点，.arrow为箭头，.arrow-prev为向左箭头，.arrow-next为向右箭头。

2. 实现轮播图效果

接下来就可以使用JavaScript完成轮播图效果，可以考虑使用如下步骤：

2.1 获取元素并初始化

首先要获取轮播图容器和其它相关元素，并初始化相关状态。全部代码如下：

const carousel = document.querySelector('.carousel');
const carouselList = document.querySelector('.carousel-list');
const carouselItems = document.querySelectorAll('.carousel-item');
const dots = document.querySelectorAll('.dot');
const arrowPrev = document.querySelector('.arrow-prev');
const arrowNext = document.querySelector('.arrow-next');

const imgWidth = carousel.clientWidth;
const imgCount = carouselItems.length;
let currIndex = 0;
let prevIndex = imgCount - 1;
let nextIndex = 1;
let isAnimating = false;
let imgTimer = null;

上述代码中，imgWidth为轮播图宽度，imgCount为轮播图数量，currIndex为当前索引，prevIndex为上一个索引，nextIndex为下一个索引，isAnimating为是否正在动画中，imgTimer为图片轮播的计时器。

2.2 完成图片轮播

接下来要完成图片的轮播，使用如下代码：

function move(offset) {
  if (isAnimating) {
    return;
  }
  isAnimating = true;
  const duration = 500;
  const interval = 16;
  const frames = duration / interval;
  const speed = Math.ceil(offset / frames);
  let newLeft = parseInt(carouselList.style.left) + offset;

  const go = function () {
    if ((offset < 0 && newLeft < targetLeft) || (offset > 0 && newLeft > targetLeft)) {
      carouselList.style.left = targetLeft + 'px';
      isAnimating = false;
      dotSlect(currIndex);
    } else {
      newLeft += speed;
      carouselList.style.left = newLeft + 'px';
      setTimeout(go, interval);
    }
  };
  const targetLeft = -currIndex * imgWidth;
  go();
}

上述代码中，move函数为轮播函数，offset为图片偏移量，duration为动画持续时间，interval为动画帧间隔，frames为动画帧数，speed为每帧偏移量，newLeft为新的轮播项左边界位置，targetLeft为目标左偏移量，go为迭代函数，用于实现图片移动动画效果。

2.3 控制向前、向后

接下来要控制向前、向后按钮的点击事件，使用如下代码：

arrowPrev.addEventListener('click', function (event) {
  event.preventDefault();
  if (isAnimating) {
    return;
  }
  prevIndex = currIndex;
  currIndex = --currIndex < 0 ? imgCount - 1 : currIndex;
  nextIndex = ++nextIndex > imgCount - 1 ? 0 : nextIndex;
  move(imgWidth);
})

arrowNext.addEventListener('click', function (event) {
  event.preventDefault();
  if (isAnimating) {
    return;
  }
  prevIndex = currIndex;
  currIndex = ++currIndex > imgCount - 1 ? 0 : currIndex;
  nextIndex = --nextIndex < 0 ? imgCount - 1 : nextIndex;
  move(-imgWidth);
})

上述代码中，arrowPrev.addEventListener为向前按钮的点击事件，prevIndex为上一个轮播项索引，currIndex为当前轮播项索引，nextIndex为下一个轮播项索引，move为轮播函数，arrowNext.addEventListener为向后按钮的点击事件。

2.4 控制轮播点

最后要实现的是轮播点，要实现自动切换、鼠标悬浮等功能，使用如下代码：

dots.forEach(function (dot, index) {
  dot.addEventListener('click', function (event) {
    event.preventDefault();
    if (isAnimating || index === currIndex) {
      return;
    }
    prevIndex = currIndex;
    currIndex = index;
    move(-imgWidth * (currIndex - prevIndex));
  })
})

function dotSlect(index) {
  dots.forEach(function (dot) {
    dot.classList.remove('active');
  })
  dots[index].classList.add('active');
}

function autoPlay() {
  imgTimer = setInterval(function () {
    arrowNext.click();
  }, 5000);
}

function stopPlay() {
  clearInterval(imgTimer);
}

carousel.addEventListener('mouseenter', function () {
  stopPlay();
})

carousel.addEventListener('mouseleave', function () {
  autoPlay();
})

autoPlay();

上述代码中，dots.forEach为轮播点鼠标点击事件，dotSelect用于切换轮播点样式，autoPlay用于自动轮播，stopPlay用于停止自动轮播，carousel.addEventListener为鼠标悬浮停止自动轮播，移开恢复自动轮播。

依照上述步骤，即可完成一款动态、美观的淘宝轮播图效果。完整代码可参考此处。