原生JS实现匀速图片轮播动画

下面我就详细讲解“原生JS实现匀速图片轮播动画”的完整攻略：

一、概述

图片轮播动画是网页设计中常用的效果，它能够增加页面的美感，并且能够呈现多个图片，帮助用户更好的了解网站的内容。本攻略将介绍如何使用原生JS实现匀速图片轮播动画。

二、实现步骤

1. HTML结构

首先，在HTML中需要创建一个容器，用于存储图片和轮播进度条。HTML结构如下：

<div class="slider-container">
  <div class="slider-list">
    <img src="xxx.jpg" alt="">
    <img src="yyy.jpg" alt="">
    ...
  </div>
  <ul class="slider-nav"></ul>
</div>

在上述代码中，slider-container是轮播的容器，slider-list是图片列表容器，slider-nav是轮播进度条容器。需要注意的是，slider-list容器中需要添加多个img元素，这些元素就是需要展示的图片。另外，轮播进度条可以选择使用ul和li元素实现。

2. CSS样式

对于轮播容器和列表容器，需要添加如下CSS样式：

.slider-container {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative; /*轮播容器需要设置相对定位*/
}
.slider-list {
  position: absolute; /*图片列表容器需要设置绝对定位*/
  top: 0;
  left: 0;
  width: 6000px; /*图片列表容器需要设置超出可见区域*/
  height: 400px;
}
.slider-list img {
  float: left; /*图片需要设置浮动，以便列表容器能够自适应高度*/
  width: 600px;
  height: 400px;
}

对于轮播进度条容器，需要添加如下CSS样式：

.slider-nav {
  position: absolute; /*轮播进度条容器需要设置绝对定位*/
  bottom: 20px;
  left: 50%;
}
.slider-nav li {
  display: inline-block; /*轮播进度条子项需要设置为行内块元素*/
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #fff;
  border-radius: 50%; /*实现圆形效果*/
  cursor: pointer;
}
.slider-nav li.active {
  background-color: #666; /*设置激活状态下的背景色*/
}

3. JS实现

在JS中，需要通过获取相应的元素，计算图片的宽度和总页数，以及添加轮播进度条的子项等操作。核心逻辑如下：

var $sliderContainer = document.querySelector('.slider-container');
var $sliderList = document.querySelector('.slider-list');
var $sliderImgs = document.querySelectorAll('.slider-list img');
var $sliderNav = document.querySelector('.slider-nav');
var $sliderNavItems = null;

var imgWidth = $sliderImgs[0].offsetWidth;
var pageCount = $sliderImgs.length;
var curIndex = 0;

// 初始化
init();

function init() {
  renderNav(); // 添加轮播进度条子项
  bindEvents(); // 绑定事件
  startTimer(); // 启动自动播放
}

// 添加轮播进度条子项
function renderNav() {
  var navHtml = '';
  for (var i = 0; i < pageCount; i++) {
    navHtml += '<li></li>';
  }
  $sliderNav.innerHTML = navHtml;
  $sliderNavItems = $sliderNav.querySelectorAll('li');
  setActive(0);
}

// 绑定事件
function bindEvents() {
  // 鼠标悬停事件
  $sliderContainer.addEventListener('mouseover', function() {
    stopTimer();
  });
  $sliderContainer.addEventListener('mouseleave', function() {
    startTimer();
  });
  // 轮播进度条子项点击事件
  $sliderNav.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
      var index = Array.prototype.indexOf.call($sliderNavItems, e.target);
      setActive(index);
      slideTo(index);
    }
  });
}

// 设置当前轮播进度条项
function setActive(index) {
  for (var i = 0; i < pageCount; i++) {
    if (i === index) {
      $sliderNavItems[i].className = 'active';
    } else {
      $sliderNavItems[i].className = '';
    }
  }
}

// 滑动到指定序号
function slideTo(index) {
  var curLeft = -$sliderList.offsetLeft;
  var targetLeft = imgWidth * index;

  var startTime = new Date().getTime();
  var duration = 500; // 动画时长
  var timer = setInterval(function() {
    var curTime = new Date().getTime() - startTime;
    var percent = curTime / duration;
    if (percent > 1) {
      percent = 1;
    }
    var newLeft = curLeft + (targetLeft - curLeft) * percent;
    $sliderList.style.left = -newLeft + 'px';
    if (percent === 1) {
      clearInterval(timer);
    }
  }, 10);
}

// 启动自动播放
function startTimer() {
  clearInterval(timer);
  timer = setInterval(function() {
    curIndex++;
    if (curIndex >= pageCount) {
      curIndex = 0;
    }
    setActive(curIndex);
    slideTo(curIndex);
  }, 3000);
}

// 停止自动播放
function stopTimer() {
  clearInterval(timer);
}

4. 示例说明

接下来，本攻略将给出两个不同的示例，帮助读者更好地理解和实践上述代码：

示例1

在第一个示例中，假设轮播的图片只有两张，即：

<div class="slider-container">
  <div class="slider-list">
    <img src="xxx.jpg" alt="">
    <img src="yyy.jpg" alt="">
  </div>
  <ul class="slider-nav"></ul>
</div>

此时，只需要将JS中的init()函数中的startTimer()语句注释掉，即可实现静态的轮播效果。具体实现可以参考以下代码：

function init() {
  renderNav();
  bindEvents();
  // startTimer();
}

示例2

在第二个示例中，假设轮播的图片有五张，并且需要添加文字说明，即：

<div class="slider-container">
  <div class="slider-list">
    <img src="xxx.jpg" alt="">
    <div class="slider-item-desc">
      <p>图1说明文字</p>
    </div>
    <img src="yyy.jpg" alt="">
    <div class="slider-item-desc">
      <p>图2说明文字</p>
    </div>
    ...
  </div>
  <ul class="slider-nav"></ul>
</div>

此时，我们需要通过添加CSS样式，来使得图片和文字可以重叠在一起。具体代码如下：

.slider-item-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5); /*添加半透明背景色*/
  color: #fff;
}
.slider-item-desc p {
  margin: 0;
  padding: 0;
}

同时，需要在JS中添加以下语句，以便轮播效果照常工作：

var $sliderItemDescs = $sliderList.querySelectorAll('.slider-item-desc');

function setActive(index) {
  for (var i = 0; i < pageCount; i++) {
    if (i === index) {
      $sliderNavItems[i].className = 'active';
      $sliderItemDescs[i].style.display = 'block';
    } else {
      $sliderNavItems[i].className = '';
      $sliderItemDescs[i].style.display = 'none';
    }
  }
}