JavaScript实现简单图片轮播效果

2023年6月11日上午12:24 • JavaScript

当实现一个简单的图片轮播效果时，我们通常需要考虑以下几个方面：

如何获取要展示的图片。这个过程通常需要先获取图片的地址，然后将图片地址插入到HTML中，再将图片展示出来。
如何实现图片轮播。这个过程通常需要对图片进行切换，可以考虑使用CSS动画或者JavaScript控制图片的切换。

下面是一个基于JavaScript实现简单图片轮播效果的攻略：

步骤一：准备工作

首先需要准备好HTML代码和CSS样式，以及需要用到的图片。其中，HTML代码需要包含一个用于展示图片轮播效果的区域，CSS样式需要用来控制图片样式，例如宽度、高度和居中等。HTML代码示例如下：

<div class="slider">
  <img src="img1.jpg" alt="img1" class="slide current">
  <img src="img2.jpg" alt="img2" class="slide">
  <img src="img3.jpg" alt="img3" class="slide">
  <img src="img4.jpg" alt="img4" class="slide">
</div>

CSS样式示例如下：

.slider {
  width: 80%;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.slider .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slider .slide.current {
  opacity: 1;
}

步骤二：获取图片地址和展示图片

这个过程需要我们通过JavaScript获取图片地址，并将图片插入到HTML中。我们可以使用一个数组来存储图片地址，然后使用DOM操作将图片添加到HTML中。代码实现如下：

const images = [
  "img1.jpg",
  "img2.jpg",
  "img3.jpg",
  "img4.jpg"
];

const slider = document.querySelector(".slider");
const slides = slider.querySelectorAll(".slide");

slides.forEach((slide, index) => {
  slide.src = images[index];
});

步骤三：实现图片轮播

这个过程可以通过JavaScript控制图片的切换来实现。我们可以通过设置一个计时器，在一定的时间间隔内切换图片。切换图片的方法可以通过控制CSS样式的opacity值来实现。代码实现如下：

let currentSlide = 0;

function showSlide() {
  slides[currentSlide].classList.remove("current");
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add("current");
}

setInterval(showSlide, 2000);

这样就可以实现一个简单的图片轮播效果了。下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Simple Slider</title>
    <style>
      .slider {
        width: 80%;
        height: 400px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
      }
      .slider .slide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }
      .slider .slide.current {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <img src="img1.jpg" alt="img1" class="slide current">
      <img src="img2.jpg" alt="img2" class="slide">
      <img src="img3.jpg" alt="img3" class="slide">
      <img src="img4.jpg" alt="img4" class="slide">
    </div>
    <script>
      const images = [
        "img1.jpg",
        "img2.jpg",
        "img3.jpg",
        "img4.jpg"
      ];

      const slider = document.querySelector(".slider");
      const slides = slider.querySelectorAll(".slide");

      slides.forEach((slide, index) => {
        slide.src = images[index];
      });

      let currentSlide = 0;

      function showSlide() {
        slides[currentSlide].classList.remove("current");
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].classList.add("current");
      }

      setInterval(showSlide, 2000);
    </script>
  </body>
</html>

示例说明：