原生javascript实现图片轮播切换效果

下面进入主题，讲解如何用原生 JavaScript 实现图片轮播切换效果。

准备

在开始实现之前，我们需要先准备好以下内容：

1. 图片资源
2. 一个用于显示轮播图片的HTML元素
3. CSS样式
4. JavaScript代码

HTML

我们先来看一下 HTML 部分的代码。我们需要一个 div 元素作为图片轮播的容器，用于显示待切换的图片。

<div id="image-container">
  <img src="img1.jpg" alt="图片1" />
  <img src="img2.jpg" alt="图片2" />
  <img src="img3.jpg" alt="图片3" />
</div>

CSS

再来看一下 CSS 部分的代码。我们需要设置图片容器的宽度和高度，以及将图片设置为居中显示。

#image-container {
  width: 700px;
  height: 400px;
  margin: 0 auto;
  text-align: center;
}

#image-container img {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

#image-container img:first-child {
  display: block;
}

上面的代码中，第一个 img 元素会被默认显示，其他 img 元素通过 CSS 隐藏。在 JavaScript 中，我们会根据需求动态地切换图片的显示。

JavaScript

接下来我们来到 JavaScript 的实现过程。我们需要实现以下三个功能：

1. 自动轮播图片
2. 点击左、右按钮切换图片，包括切换前后的图片使用动画特效
3. 鼠标悬停在轮播图上时停止自动轮播，离开时自动轮播继续

自动轮播图片

自动轮播图片需要使用定时器来实现。我们可以使用 setInterval 或者 setTimeout 方法来实现。

let index = 0;
let timer = setInterval(() => {
  index++;
  if(index >= imageList.length) {
    index = 0;
  }
  changeImage(index);
}, 3000);

function changeImage(index) {
  const imageList = document.querySelectorAll("#image-container img");
  const currentImage = document.querySelector("#image-container img.show");
  const nextImage = imageList[index];
  currentImage.classList.remove("show");
  nextImage.classList.add("show");
}

在上面的代码中，我们设置了一个 timer 变量，使用 setInterval 方法每隔 3 秒钟自动轮播一次图片。index 变量表示当前显示的图片在图片列表中的索引。在函数 changeImage 中，我们使用 querySelectorAll 方法获取所有图片元素，并从中找到当前显示的图片和下一张要显示的图片。然后对当前和下一张图片元素分别进行操作，使用 classList 进行 CSS 类的添加和删除，从而实现图片轮播的切换效果。

点击左右按钮切换图片

左右切换按钮的实现主要分为两个部分：添加左右按钮的点击事件监听器，以及实现图片切换动画。其中，图片切换动画可以使用 CSS3 中的 transition 属性实现。

const leftButton = document.querySelector('#left-button');
const rightButton = document.querySelector('#right-button');
let currentIndex = 0;

leftButton.addEventListener('click', () => {
  currentIndex--;
  if(currentIndex<0) {
    currentIndex = imageList.length-1;
  }
  changeImage(currentIndex);
});

rightButton.addEventListener('click', () => {
  currentIndex++;
  if(currentIndex >= imageList.length) {
    currentIndex = 0;
  }
  changeImage(currentIndex);
});

function changeImage(index) {
  const currentImage = document.querySelector("#image-container img.show");
  const nextImage = imageList[index];

  // 在动画结束后，去掉图片的 translate 属性
  currentImage.style.transform = "translate(-700px)";
  currentImage.addEventListener("transitionend", () => {
    nextImage.classList.add("next");
    currentImage.classList.remove("show");
    currentImage.classList.remove("next");
    currentImage.style.transform = "";
  });

  // 添加 next 类，缩小图片的初始大小
  nextImage.classList.add("next");
  setTimeout(() => {
    nextImage.classList.add("show");
    currentImage.style.transform = "translate(700px)";
  }, 10);
}

在上面的代码中，我们定义了两个变量 leftButton 和 rightButton，分别表示左右切换按钮元素。然后为左右按钮分别添加 click 事件监听器，当点击按钮时，调用 changeImage 方法，实现图片的切换。

在 changeImage 方法中，我们先获取当前显示的图片和下一张要显示的图片。为了使切换图片时显示出动画效果，我们使用 transition 属性给当前显示的图片添加一个动画过渡效果。当当前图片的动画效果结束之后，我们再移除它的 show 和 next 类，并将图片的 translate 属性清除，恢复图片的原始位置。

右边图片的处理思路类似，不再赘述。

停止自动轮播

最后，我们需要实现当鼠标悬停在轮播图上时，停止自动轮播，当鼠标移开时，自动轮播继续。

const imageContainer = document.querySelector("#image-container");

Imagecontainer.addEventListener("mouseenter", () => {
  clearInterval(timer);
});

Imagecontainer.addEventListener("mouseleave", () => {
  timer = setInterval(() => {
    index++;
    if (index >= imageList.length) {
      index = 0;
    }
    changeImage(index);
  }, 3000);
});

在上面的代码中，我们使用 addEventListener 监听鼠标进入和离开事件，并在事件发生时更改定时器来实现自动轮播的停止和继续。

示例

以上就是实现原生 JavaScript 图片轮播的完整攻略。现在来看两个实际示例，一个是将图片旋转 360 度来实现轮播效果，另一个是使用纯 css 来实现轮播效果，两个示例会帮助你更好的理解 JavaScript 中实现轮播的细节。

示例一：旋转效果

#image-container {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 50px auto 0;
  perspective: 1000px;
}

#image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s linear;
}

#image-container img.next {
  transform: rotateY(180deg);
}

#image-container img.show {
  transform: rotateY(0deg);
}

const imageList = document.querySelectorAll("#image-container img");
let index = 0;
let timer = setInterval(() => {
  index++;
  if (index >= imageList.length) {
    index = 0;
  }
  changeImage(index);
}, 3000);

function changeImage(index) {
  const currentImage = document.querySelector("#image-container img.show");
  const nextImage = imageList[index];
  currentImage.classList.remove("show");
  nextImage.classList.add("next");
  setTimeout(() => {
    nextImage.classList.add("show");
    currentImage.classList.remove("next");
  }, 500);
}

示例二：CSS 实现轮播

#image-container {
  width: 700px;
  height: 400px;
  margin: 50px auto;
  position: relative;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-out;
}

#image-container img.show {
  opacity: 1;
  z-index: 1;
}

#image-container img.next {
  opacity: 1;
  z-index: 2;
}

const imageList = document.querySelectorAll("#image-container img");
let index = 0;
let timer = setInterval(() => {
  index++;
  if (index >= imageList.length) {
    index=0;
  }
  changeImage(index);
}, 3000);

function changeImage(index) {
  const currentImage = document.querySelector("#image-container img.show");
  const nextImage = imageList[index];
  currentImage.classList.remove("show");
  nextImage.classList.add("next");
  setTimeout(() => {
    nextImage.classList.remove("next");
    nextImage.classList.add("show");
  }, 500);
}

总结

以上就是实现原生 JavaScript 图片轮播的过程，其中的每个步骤都有其实现的原理和细节。通过这个例子，我们不仅学会了如何使用 JavaScript 实现图片轮播，还了解了使用 CSS 实现轮播效果的方法，同时也提高了我们在 HTML/CSS/JavaScript 应用中的综合能力。