原生JS实现旋转木马式图片轮播插件

下面是“原生JS实现旋转木马式图片轮播插件”的完整攻略：

概述

通过原生JS实现旋转木马式图片轮播插件，需要掌握以下知识点：

1. 利用 JavaScript 操作 DOM 元素。
2. 利用 CSS 完成动画效果。
3. 利用 JavaScript 实现定时器。
4. 利用事件处理函数实现用户交互。

实现步骤

下面逐一介绍实现旋转木马式图片轮播插件的步骤：

1. 创建 HTML 结构。

<div id="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
  </div>
  <div class="carousel-nav">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

1. 编写 CSS 样式。

#carousel {
  position: relative;
  overflow: hidden;
}
.carousel-images {
  display: flex;
  position: absolute;
  width: 500%;
  left: -100%;
  transition: left 0.8s;
}
.carousel-images img {
  flex: 1;
}
.carousel-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.carousel-nav span {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
}
.carousel-nav span.active {
  background-color: #333;
}

1. 编写 JavaScript 代码。

首先，定义需要用到的变量：

var currentIndex = 0; // 当前下标
var timer = null; // 定时器
var duration = 3000; // 播放间隔
var images = document.querySelector('#carousel .carousel-images');
var nav = document.querySelector('#carousel .carousel-nav');
var navNodes = nav.querySelectorAll('span');

接着，编写轮播函数：

function play(index) {
  // 根据下标改变 left 值来进行切换
  images.style.left = -index * 100 + '%';

  // 添加 active 样式，表示当前是第几张图片
  navNodes[currentIndex].classList.remove('active');
  navNodes[index].classList.add('active');

  currentIndex = index;
}

然后，编写定时器函数：

function startTimer() {
  timer = setInterval(function() {
    var nextIndex = (currentIndex + 1) % navNodes.length;
    play(nextIndex);
  }, duration);
}

最后，实现用户交互：

// 鼠标移入停止定时器，鼠标移出开始定时器
images.addEventListener('mouseenter', function() {
  clearInterval(timer);
});
images.addEventListener('mouseleave', function() {
  startTimer();
});

// 点击导航点进行切换
nav.addEventListener('click', function(e) {
  if (e.target.tagName === 'SPAN') {
    var index = Array.prototype.indexOf.call(navNodes, e.target);
    play(index);
    clearInterval(timer);
    startTimer();
  }
});

// 开始轮播
startTimer();

示例说明

示例1：Demo

示例2：Demo

以上说明就是实现旋转木马式图片轮播插件的完整攻略，希望对你有所帮助。