「手把手带你用原生JavaScript打造丝滑轮播图」

2023-01-06 13:13:54

原生 JavaScript 轮播图：让你的作品闪耀夺目

想象一下，有一个令人惊叹的数字画廊，你的杰作轮番呈现，吸引着观众的眼球。通过原生 JavaScript，你可以将这种愿景变为现实，创建一个丝滑流畅的轮播图，展示你的作品，让它们熠熠生辉。

从头开始：编写代码

要创建轮播图，我们需要一个 HTML 文件，它将充当我们的画布。在 HTML 文件中，放置以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    /* 你的 CSS 代码 */
  </style>
</head>
<body>
  <div id="carousel">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
  </div>
  <script>
    /* 你的 JavaScript 代码 */
  </script>
</body>
</html>

下一步，我们需要用 CSS 样式来美化轮播图。在<head>标签中创建<style>标签，并添加以下代码：

#carousel {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

#carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

让轮播图动起来！

有了基本的结构，现在是时候让轮播图动起来了。在<body>标签中，创建<script>标签，并添加以下 JavaScript 代码：

const carousel = document.getElementById("carousel");
const images = carousel.querySelectorAll("img");
let currentImageIndex = 0;

function nextImage() {
  currentImageIndex++;
  if (currentImageIndex >= images.length) {
    currentImageIndex = 0;
  }
  carousel.style.backgroundImage = `url(${images[currentImageIndex].src})`;
}

setInterval(nextImage, 3000);