零基础也能轻松搞定的CSS轮播图教程

前端

2023-11-07 14:13:27

CSS 轮播图：一步步打造引人注目的网页

什么是轮播图？

轮播图是一种交互式元素，在网页上展示一系列图像或内容。它们通常自动播放或手动控制，让用户可以轻松浏览不同幻灯片。

轮播图的优势

轮播图是增强网页吸引力的有效工具，可以：

展示产品图片或宣传图片
突出公司简介或团队成员
提供交互式体验，提升用户参与度

CSS 轮播图教程

步骤 1：HTML 准备

<div id="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

此代码创建一个轮播图容器（#carousel），其中包含三个图像幻灯片。

步骤 2：CSS 准备

#carousel {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

#carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#carousel img:first-child {
  display: block;
}

#carousel img:not(:first-child) {
  display: none;
}

此 CSS 代码设置轮播图的样式：

设置容器的宽度和高度
隐藏所有幻灯片，只显示第一个
调整幻灯片的大小以适应容器

步骤 3：JavaScript 准备

let carousel = document.getElementById('carousel');
let slides = carousel.querySelectorAll('img');
let currentSlide = 0;

function showSlide(n) {
  slides[currentSlide].style.display = "none";
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].style.display = "block";
}

setInterval(function() {
  showSlide(currentSlide + 1);
}, 3000);