前沿：一览 JS+CSS 打造动态轮播图的本质

闲谈

2023-06-06 10:47:09

JS + CSS 联手铸造轮播图，探索技术与创意的碰撞

在技术变革的前沿，JavaScript 和 CSS 携手为网页设计带来了无限可能。而轮播图正是这两个技术巨头携手合作的杰作，将视觉盛宴与交互体验完美融合。

轮播图的无限可能

轮播图绝不仅仅是展示图片的容器，更是一块供创意与技术融合的舞台。你可以将视频、动画甚至 3D 模型嵌入其中，让视觉冲击直击人心。

而在技术层面，轮播图也充满挑战。要让轮播图流畅运行，你需要精通 JavaScript 和 CSS，并具备扎实的编程基础。但即便你是前端开发新手，也不必望而却步。这篇文章将带你从头开始，一步步构建一个炫酷的轮播图。

踏上轮播图创作之旅

1. 构建基本结构

<div class="carousel">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

这段 HTML 代码为轮播图提供了基本结构。<div class="carousel"> 是轮播图的容器，<div class="slides"> 是存放图片的容器，<img> 标签是图片本身，而<div class="dots"> 是存放轮播图导航点的容器。

2. 添加样式

.carousel {
  width: 100%;
  height: 500px;
  position: relative;
}

.slides {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dots {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
}

.dot.active {
  background-color: #000;
}

这段 CSS 代码为轮播图添加了样式。<style> 标签中的样式表包含了一系列 CSS 规则，用于定义轮播图的外观和布局。其中，.carousel 是轮播图的容器样式，.slides 是存放图片的容器样式，.slides img 是图片本身的样式，.dots 是存放轮播图导航点的容器样式，.dot 是导航点本身的样式，.dot.active 是当前活动的导航点的样式。

3. 添加 JavaScript

const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.slides img');
const dots = document.querySelectorAll('.dot');

let currentSlide = 0;

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    currentSlide = index;
    updateCarousel();
  });
});

function updateCarousel() {
  slides.forEach((slide, index) => {
    slide.style.display = index === currentSlide ? 'block' : 'none';
  });

  dots.forEach((dot, index) => {
    dot.classList.remove('active');
  });

  dots[currentSlide].classList.add('active');
}

setInterval(() => {
  currentSlide++;
  if (currentSlide > slides.length - 1) {
    currentSlide = 0;
  }
  updateCarousel();
}, 5000);