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

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

HTML 结构

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

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

  
  

    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
  
  
  

    

    

    

    

    

    

    

    

  

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 代码负责实现轮播图的自动播放、手动切换和指示器按钮的联动。

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

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

下载

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

1. 获取 DOM 元素: 首先，获取所有需要操作的 DOM 元素，包括容器、图片、按钮和指示器。
2. 初始化: 设置初始状态，例如当前显示的图片索引。
3. 自动播放: 使用 setTimeout 函数定时切换图片。
4. 手动切换: 为左右箭头按钮添加事件监听器，点击时切换到上一张或下一张图片。
5. 指示器按钮: 为每个指示器按钮添加事件监听器，点击时切换到对应的图片。
6. 图片切换函数 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);
};

注意事项

• 图片路径: 确保图片路径正确，否则轮播图将无法显示图片。
• CSS 样式: CSS 样式对于轮播图的外观和动画效果至关重要，请根据需要进行调整。
• JavaScript 代码: JavaScript 代码是轮播图的核心，需要仔细检查逻辑是否正确。
• 性能优化: 如果轮播图包含大量图片，可以考虑使用图片懒加载等技术来优化性能。

总结

通过本文的教程，您应该能够创建一个基本的自动轮播图。您可以根据自己的需求，进一步扩展和优化轮播图的功能和样式。例如，可以添加过渡动画、自定义指示器样式、支持触摸滑动等。记住，理解 HTML 结构、CSS 样式和 JavaScript 逻辑是构建任何 Web 应用的基础。