创建自动轮播图：J*aScript 实现指南_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

创建自动轮播图：J*aScript 实现指南

2025-10-09

浏览次数：次

返回列表

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

本文旨在帮助开发者构建一个自动轮播图，解决手动切换和自动播放的问题。我们将提供完整的 HTML、CSS 和 J*aScript 代码示例，并详细解释实现原理，确保即使是 J*aScript 新手也能轻松掌握。重点在于理解 J*aScript 如何控制轮播图的自动切换和手动控制逻辑，以及如何优化 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">@@##@@</div>
    <div class="sliderbox_image">@@##@@</div>
    <div class="sliderbox_image">@@##@@</div>
    <div class="sliderbox_image">@@##@@</div>
    <div class="sliderbox_image">@@##@@</div>
    <div class="sliderbox_image">@@##@@</div>
    <div class="sliderbox_image">@@##@@</div>
    <div class="sliderbox_image">@@##@@</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 样式：

MediPro乡镇政府门户网站系统 5.1.0 UTF-8简体中文版

MediPro乡镇政府门户网站系统，适合乡镇政府机构创建地方门户网站，用以宣传本地资源，实现政务公开，促进乡镇基层信息化建设。本系统基于PHP+MYSQL开发，预设了乡镇风采、党政机构、政务公开、投资指南、服务导航、文件下载、公众互动、领导信箱等乡镇政府门户网站常用的栏目和测试数据，采用适合乡镇政府门户网站的专用模版，增强了系统的针对性和易用性。除了文章系统、图文系统、下载系统、社区交流、反馈表单

0 查看详情 MediPro乡镇政府门户网站系统 5.1.0 UTF-8简体中文版

.sliderbox: 设置 position: relative 和 overflow: hidden，确保图片超出容器时被隐藏。
.sliderbox_image: 使用 position: absolute 将所有图片堆叠在一起，并通过 opacity 控制图片的显示和隐藏。
.sliderbox_image.active: 设置 opacity: 1 和 position: relative 使当前图片显示出来。
.sliderbox_image.inactive: 用于在切换时，先让上一张图片显示（opacity: 1），再通过 J*aScript 移除这个 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;
}

J*aScript 实现

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

获取 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);
};