创建自动轮播图：JavaScript 实现指南

碧海醫心

发布时间：2025-10-09 12:30:28

746人浏览过

来源于php中文网

原创

创建自动轮播图：javascript 实现指南

本文旨在帮助开发者构建一个自动轮播图，解决手动切换和自动播放的问题。我们将提供完整的 HTML、CSS 和 JavaScript 代码示例，并详细解释实现原理，确保即使是 JavaScript 新手也能轻松掌握。重点在于理解 JavaScript 如何控制轮播图的自动切换和手动控制逻辑，以及如何优化 CSS 样式以实现平滑的过渡效果。

HTML 结构

轮播图的 HTML 结构主要包含以下几个部分：

容器 slider-banners: 包含整个轮播图的所有元素。
左右箭头按钮 slider-button_left 和 slider-button_right: 用于手动切换图片。
图片容器 sliderbox: 包含所有轮播的图片。
图片元素 sliderbox_image: 每个元素包含一张图片。
指示器按钮 slider-selectors_buttons: 用于指示当前显示的图片，并允许用户直接跳转到特定图片。

<div class="slider-banners">
  <button class="slider-button_left" style="left: 30px;"><i class="fa-solid fa-angle-left" style="font-size: 30px; color: #ffffff;"></i></button>
  <div class="sliderbox">
    <div class="sliderbox_image active"><img src="img/Slider/BannerStore1.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore2.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore3.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore4.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore5.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore6.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore7.jpg"></div>
    <div class="sliderbox_image"><img src="img/Slider/BannerStore8.jpg"></div>
  </div>
  <button class="slider-button_right" style="right: 30px;"><i class="fa-solid fa-angle-right" style="font-size: 30px; color: #ffffff;"></i></button>
  <ul class="slider-selectors_buttons">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script>

CSS 样式

CSS 样式主要用于控制轮播图的布局、外观和动画效果。以下是一些关键的 CSS 样式：

.sliderbox: 设置 position: relative 和 overflow: hidden，确保图片超出容器时被隐藏。
.sliderbox_image: 使用 position: absolute 将所有图片堆叠在一起，并通过 opacity 控制图片的显示和隐藏。
.sliderbox_image.active: 设置 opacity: 1 和 position: relative 使当前图片显示出来。
.sliderbox_image.inactive: 用于在切换时，先让上一张图片显示（opacity: 1），再通过 JavaScript 移除这个 class。
.slider-selectors_buttons: 用于指示器按钮的布局和样式。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Times New Roman", Times, serif;
  background-color: #4d4d4d;
  margin: 0;
  padding: 0;
}

.slider-banners {
  display: flex;
  justify-content: center;
  height: auto;
  width: 100%;
  position: relative;
}

.sliderbox {
  position: relative;
  height: 380px;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.sliderbox_image {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  opacity: 0;
}

.sliderbox_image.inactive {
  opacity: 1;
}

.sliderbox_image.active {
  opacity: 1;
  position: relative;
}

.slider_image img {
  width: 100%;
  height: auto;
  text-align: center;
}

.slider-button_left,
.slider-button_right {
  position: absolute;
  display: block;
  padding: 8px;
  background-color: #66323129;
  align-self: center;
  border: none;
  border-radius: 5px;
  transition: 0.4s ease;
  z-index: 1000;
  cursor: pointer;
}

.slider-button_left:hover,
.slider-button_right:hover {
  background-color: #663231f0;
  transform: translateX(2px);
  padding: 10px;
}

.slider-selectors_buttons {
  display: flex;
  width: 100%;
  position: absolute;
  list-style: none;
  bottom: -30px;
  justify-content: space-evenly;
}

.slider-selectors_buttons li {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid black;
}

.slider-selectors_buttons li.active {
  background-color: black;
}

.dissable-s {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 15px 5px;
  cursor: pointer;
  background-color: #66323129;
  border-color: #000000a0;
}

.dissable-s:hover {
  background-color: #663231f0;
  border-color: #000000cb;
}

.active-s {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 15px 5px;
  cursor: pointer;
  background-color: #f47b3e;
  border-color: #000000cb;
}

JavaScript 实现

JavaScript 代码负责实现轮播图的自动播放、手动切换和指示器按钮的联动。

AssemblyAI

转录和理解语音的AI模型

下载

立即学习“Java免费学习笔记（深入）”；

获取 DOM 元素: 首先，获取所有需要操作的 DOM 元素，包括容器、图片、按钮和指示器。
初始化: 设置初始状态，例如当前显示的图片索引。
自动播放: 使用 setTimeout 函数定时切换图片。
手动切换: 为左右箭头按钮添加事件监听器，点击时切换到上一张或下一张图片。
指示器按钮: 为每个指示器按钮添加事件监听器，点击时切换到对应的图片。
图片切换函数 playSlide(slide): 这个函数是核心，负责更新图片的显示状态和指示器按钮的激活状态。

let sliderBanners = document.querySelector(".slider-banners"),
  dots = document.querySelectorAll(".slider-selectors_buttons li"),
  sliderContent = document.querySelectorAll(".slider-banners .sliderbox_image"),
  leftArrow = document.querySelector(".slider-button_left"),
  rightArrow = document.querySelector(".slider-button_right"),
  sliderSpeed = 4500,
  currentSlide = 0,
  currentActive = 0,
  sliderTimer;

window.onload = function() {
  function playSlide(slide) {
    for (let i = 0; i < dots.length; i++) {
      sliderContent[i].classList.remove("active");
      sliderContent[i].classList.remove("inactive");
      dots[i].classList.remove("active");
    }
    if (slide < 0) {
      slide = currentSlide = sliderContent.length - 1;
    }
    if (slide > sliderContent.length - 1) {
      slide = currentSlide = 0;
    }
    if (currentActive != currentSlide) {
      sliderContent[currentActive].classList.add("inactive");
    }
    sliderContent[slide].classList.add("active");
    dots[slide].classList.add("active");
    currentActive = currentSlide;

    clearTimeout(sliderTimer);
    sliderTimer = setTimeout(function() {
      playSlide((currentSlide += 1));
    }, sliderSpeed);
  }
  leftArrow.addEventListener("click", () => {
    playSlide((currentSlide -= 1));
  });
  rightArrow.addEventListener("click", () => {
    playSlide((currentSlide += 1));
  });
  for (let j = 0; j < dots.length; j++) {
    dots[j].addEventListener("click", () => {
      playSlide((currentSlide = dots.indexOf(this)));
    });
  }
  playSlide(currentSlide);
};