JavaScript实现旋转木马轮播图

实现轮播图的方法有很多种，其中较为流行的一种是旋转木马式的轮播图。在JavaScript中实现旋转木马式轮播图，主要通过以下步骤来实现：

1. HTML结构

首先需要构建页面的HTML结构。HTML结构应该包括一个容器盒子以及多个图片轮播组件。

<div class="carousel-container">
  <div class="carousel">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
  </div>
  <div class="carousel-nav">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>
</div>

其中，carousel-container是容器盒子，carousel是包含图片的轮播组件，carousel-nav是包含导航小圆点的组件。导航小圆点可以用来切换图片，它们的个数应该与图片的数量相同。

2. CSS样式

根据需求进行相应的样式设置，可以设置图片的尺寸、轮播器的宽高、导航小圆点的样式等。

.carousel-container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.carousel {
  position: absolute;
  left: -100%;
  width: 300%;
  height: 100%;
}

.carousel img {
  width: 33.333%;
  height: 100%;
  float: left;
}

.carousel-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-nav span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  background: #fff;
  cursor: pointer;
}

.carousel-nav .active {
  background: red;
}

3. JavaScript代码

3.1 获取节点和设置变量

首先获取节点，设置相关全局变量。设置定时器，每隔一定时间切换图片。

var carousel = document.querySelector('.carousel');
var nav = document.querySelectorAll('.carousel-nav span');
var index = 0;
var timer = null;

timer = setInterval(function() {
  index++;
  if (index >= nav.length) {
    index = 0;
  }
  changeItem(index);
}, 2000);

3.2 切换图片

定义切换图片的函数，该函数的作用是切换轮播图组件的位置，同时更新导航小圆点的状态。

function changeItem(index) {
  carousel.style.transform = "translateX(-" + index*100 + "%)";
  for (var i = 0; i < nav.length; i++) {
    nav[i].classList.remove('active');
  }
  nav[index].classList.add('active');
}

函数中的translateX属性控制了轮播图组件的位置，实现了图片的切换；循环设置每个导航小圆点的样式，以体现当前被选中的状态。

3.3 绑定事件

将导航小圆点与图片关联起来，单击某个小圆点时会切换到相应的图片。

for (var i = 0; i < nav.length; i++) {
  nav[i].index = i;
  nav[i].onclick = function() {
    clearInterval(timer);
    index = this.index;
    changeItem(index);
    timer = setInterval(function() {
      index++;
      if (index >= nav.length) {
        index = 0;
      }
      changeItem(index);
    }, 2000);
  }
}

为每个导航小圆点设置了index属性，用于保存该小圆点在导航中的位置。单击某个导航小圆点时，先停止定时器，在更新index的值，然后调用changeItem(index)函数进行图片切换。最后重新启动定时器。

示例1 - codepen链接：https://codepen.io/miaolivia/pen/rNxZPgp

4. 使用第三方库Swiper.js

除了使用JavaScript自己的核心代码实现旋转木马式轮播图之外，我们还可以使用一些成熟的开源库，来快速地构建这样的功能。

比如，一个开源的轮播库Swiper.js，可以快速实现各种轮播效果，包括旋转木马式轮播图。使用这个库，只需要引入相关的JS和CSS文件，再按照库的要求来进行HTML结构、CSS样式和JavaScript代码的设置，就可以轻松实现属于自己的旋转木马式轮播图。

<!-- CSS文件 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- HTML结构 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg" /></div>
    <div class="swiper-slide"><img src="image2.jpg" /></div>
    <div class="swiper-slide"><img src="image3.jpg" /></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<!-- JS文件 -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- JS代码 -->
<script>
  var mySwiper = new Swiper('.swiper-container', {
    loop: true, // 循环轮播
    autoplay: {
      delay: 2000 // 定时切换
    },
    pagination: {
      el: '.swiper-pagination', // 分页器
      clickable: true // 可点击切换
    }
  });
</script>

示例2 - codepen链接：https://codepen.io/miaolivia/pen/BaKbabR

使用第三方库，可以更加方便快捷地实现轮播图功能，同时还能够通过库的API进行相关操作，满足更多不同的应用场景。