正文

用原生JS实现轮播图，标题可以这样写： “轻松学会！用原生JS打造动态轮播图教程，图文并茂解析步骤”

/0 浏览量
0902

一、轮播图简介

轮播图是一种常见的网页交互元素，常用于展示图片、广告等内容。通过轮播图，用户可以方便地浏览不同内容，提高页面视觉效果。本文将带你用原生JavaScript实现一个简单的轮播图。

二、准备工作

在开始编写代码之前，我们需要准备以下材料：

  1. HTML结构：定义轮播图的容器、图片列表、指示器和左右切换按钮。
  2. CSS样式：设置轮播图的基本样式，包括图片大小、切换按钮样式等。
  3. JavaScript脚本：编写控制轮播图切换的脚本。

HTML结构示例

<div id="carousel" class="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev-btn">上一张</button>
  <button class="next-btn">下一张</button>
</div>

CSS样式示例

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

.carousel-images img {
  width: 100%;
  display: none;
}

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

三、JavaScript脚本编写

初始化轮播图

首先，我们需要在JavaScript中获取轮播图的相关元素，并设置初始状态。

const carousel = document.getElementById('carousel');
const images = carousel.querySelectorAll('.carousel-images img');
let currentIndex = 0;

function showImage(index) {
  images.forEach(img => img.style.display = 'none');
  images[index].style.display = 'block';
}

showImage(currentIndex);

添加切换按钮的事件监听

接下来，我们需要为切换按钮添加事件监听器，以便在点击时切换图片。

const prevBtn = carousel.querySelector('.prev-btn');
const nextBtn = carousel.querySelector('.next-btn');

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
});

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
});

自动播放功能

为了使轮播图自动播放，我们可以设置一个定时器，每隔一段时间自动切换到下一张图片。

let timer = setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}, 3000);

停止自动播放

当用户鼠标悬停在轮播图上时，我们希望停止自动播放。这可以通过添加鼠标事件监听器来实现。

carousel.addEventListener('mouseenter', () => clearInterval(timer));
carousel.addEventListener('mouseleave', () => timer = setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}, 3000));

四、完整代码

将以上代码整合到一起，我们得到了一个简单的轮播图实现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS轮播图</title>
<style>
  .carousel {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
  }

  .carousel-images img {
    width: 100%;
    display: none;
  }

  .prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
  }

  .prev-btn {
    left: 10px;
  }

  .next-btn {
    right: 10px;
  }
</style>
</head>
<body>
<div id="carousel" class="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev-btn">上一张</button>
  <button class="next-btn">下一张</button>
</div>

<script>
  const carousel = document.getElementById('carousel');
  const images = carousel.querySelectorAll('.carousel-images img');
  let currentIndex = 0;

  function showImage(index) {
    images.forEach(img => img.style.display = 'none');
    images[index].style.display = 'block';
  }

  const prevBtn = carousel.querySelector('.prev-btn');
  const nextBtn = carousel.querySelector('.next-btn');

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  });

  let timer = setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  }, 3000);

  carousel.addEventListener('mouseenter', () => clearInterval(timer));
  carousel.addEventListener('mouseleave', () => timer = setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  }, 3000));
</script>
</body>
</html>

通过以上步骤，你已经成功用原生JavaScript实现了一个简单的轮播图。你可以根据自己的需求，添加更多功能，如指示器、动画效果等。希望这个教程能帮助你！

-- 展开阅读全文 --