ES6实现图片切换特效代码

现在我将为你详细讲解“ES6实现图片切换特效代码”的完整攻略。

1. 准备工作

在开始编写代码前，我们需要准备一些工作：

1.1 HTML

首先，我们需要在HTML中设置图片的容器和按钮。具体的HTML代码如下：

<div class="img-container">
  <img src="image1.jpg" class="show">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
</div>

<div class="buttons">
  <span class="on"></span>
  <span></span>
  <span></span>
  <span></span>
</div>

其中，.img-container是图片的容器，.show是当前展示图片的标识，.buttons是按钮的容器，.on是当前选中按钮的标识。

1.2 CSS

接下来，我们需要添加CSS样式来美化图片和按钮。具体的样式如下：

.img-container {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.img-container img.show {
  opacity: 1;
}

.buttons {
  position: relative;
  text-align: center;
  margin-top: 10px;
}

.buttons span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.buttons span.on {
  background-color: #333;
}

其中，.img-container和.img-container img用来设置图片容器的样式，.buttons和.buttons span用来设置按钮容器和按钮的样式。

2. 实现代码

接下来，我们将通过ES6实现图片切换特效代码。具体的步骤如下：

2.1 定义常量和变量

我们需要定义一些常量和变量来存储图片和按钮的位置、数量和状态。具体的代码如下：

// 定义常量和变量
const imgContainer = document.querySelector('.img-container');
const imgs = document.querySelectorAll('.img-container img');
const buttons = document.querySelectorAll('.buttons span');

const len = imgs.length;
let currentIndex = 0;
let intervalId;

其中，imgContainer、imgs、buttons分别代表图片容器、图片和按钮容器；len代表图片数量；currentIndex代表当前展示图片的索引，初始值为0；intervalId用于存储定时器的ID，方便我们在后面停止轮播。

2.2 定义切换函数

我们需要定义一个图片切换函数，实现点击按钮或者自动轮播时图片的切换。具体的代码如下：

// 定义切换函数
const changeImg = (nextIndex) => {
  imgs[currentIndex].classList.remove('show');
  buttons[currentIndex].classList.remove('on');
  imgs[nextIndex].classList.add('show');
  buttons[nextIndex].classList.add('on');
  currentIndex = nextIndex;
};

其中，changeImg函数带有一个参数nextIndex，代表切换到下一张图片的索引。在函数中，我们首先将当前展示图片和选中按钮的标识移除，然后将下一张图片和按钮添加标识，最后更新当前展示图片的索引。

2.3 定义自动轮播函数

我们需要定义一个自动轮播函数，实现图片自动播放的功能。具体的代码如下：

// 定义自动轮播函数
const autoPlay = () => {
  intervalId = setInterval(() => {
    const nextIndex = currentIndex === len - 1 ? 0 : currentIndex + 1;
    changeImg(nextIndex);
  }, 3000);
};

其中，autoPlay函数使用setInterval()方法，每隔3秒自动切换到下一张图片。在方法中，我们通过三元运算符获取下一张图片的索引，然后调用changeImg函数切换到下一张图片。

2.4 实现按钮点击事件

我们需要给按钮添加事件监听器，实现点击按钮时切换到对应的图片。具体的代码如下：

// 实现按钮点击事件
buttons.forEach((button, index) => {
  button.addEventListener('click', () => {
    if (index === currentIndex) return;
    changeImg(index);
  });
});

其中，我们使用forEach()方法遍历所有按钮，给它们分别添加点击事件监听器。在监听器中，我们首先判断点击的按钮是否为当前展示的按钮，如果是则直接返回；否则调用changeImg函数切换到对应的图片。

2.5 实现鼠标悬停事件

我们需要给图片容器添加鼠标悬停事件，实现鼠标悬停时停止自动轮播，从而方便用户操作。具体的代码如下：

// 实现鼠标悬停事件
imgContainer.addEventListener('mouseenter', () => {
  clearInterval(intervalId);
});

imgContainer.addEventListener('mouseleave', () => {
  autoPlay();
});

其中，我们使用addEventListener()方法给图片容器分别添加mouseenter和mouseleave事件监听器。在监听器中，我们使用clearInterval()方法停止自动轮播，当鼠标离开图片容器时再重新开始自动轮播。

3. 示例说明

下面，我将给出两个示例说明，以便更好地理解以上代码的实现。

示例1：切换到下一张图片

我们现在需要实现点击按钮切换到下一张图片的功能。具体的代码如下：

document.querySelector('#next').addEventListener('click', () => {
  const nextIndex = currentIndex === len - 1 ? 0 : currentIndex + 1;
  changeImg(nextIndex);
});

其中，我们给ID为next的按钮添加了一个点击事件监听器，监听器中的代码与自动轮播代码类似，只不过没有了定时器，而是直接获取下一张图片的索引并切换到该图片。

示例2：初始时展示第二张图片

我们现在需要实现初始时展示第二张图片的功能。具体的代码如下：

imgs[1].classList.add('show');
buttons[1].classList.add('on');
currentIndex = 1;

其中，我们通过将imgs[1]对应的图片和buttons[1]对应的按钮添加标识的方式，将初始展示图片设置为第二张图片，并将currentIndex更新为1。

到这里，注释完整，示例说明详细，攻略完整。如果你还有什么不理解的，可以继续问我。