渐隐渐显轮播图 | 原生手写渐隐渐显轮播图教程 | 从0到1手写轮播图

2023-09-03 12:00:56

渐隐渐显轮播图

轮播图是一种常见的网页元素，用于在网页上展示一组图片或其他内容。轮播图通常是自动播放的，图片或内容会按顺序循环播放。渐隐渐显轮播图是一种特殊的轮播图，其中图片或内容是以渐隐渐显的方式播放的，而不是突然切换。

渐隐渐显轮播图可以为您的网站或项目增添一些视觉趣味性，并有助于吸引访问者的注意力。在本文中，我们将向您展示如何从头开始编写渐隐渐显轮播图。

HTML代码

首先，我们需要创建一个HTML文件来存放轮播图的代码。您可以使用任何文本编辑器来创建HTML文件，例如记事本或Sublime Text。

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>

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

  <div class="controls">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>

</body>
</html>

在上面的HTML代码中，我们创建了一个名为“carousel”的div元素来存放轮播图。在“carousel”div元素中，我们创建了三个名为“slide”的div元素，每个“slide”div元素中包含一张图片。我们还创建了两个名为“prev”和“next”的按钮，用于控制轮播图的播放。

CSS代码

接下来，我们需要创建CSS文件来设置轮播图的样式。您可以使用任何文本编辑器来创建CSS文件，例如记事本或Sublime Text。

/* 轮播图样式 */
.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

/* 幻灯片样式 */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* 活动幻灯片样式 */
.slide.active {
  opacity: 1;
}

/* 控件样式 */
.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

/* 按钮样式 */
.prev,
.next {
  padding: 10px;
  background-color: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* 按钮悬停样式 */
.prev:hover,
.next:hover {
  background-color: #333;
}

在上面的CSS代码中，我们设置了轮播图、幻灯片、控件和按钮的样式。

JavaScript代码

最后，我们需要创建JavaScript文件来控制轮播图的播放。您可以使用任何文本编辑器来创建JavaScript文件，例如记事本或Sublime Text。

/* 轮播图脚本 */
var carousel = document.querySelector('.carousel');
var slides = carousel.querySelectorAll('.slide');
var prev = carousel.querySelector('.prev');
var next = carousel.querySelector('.next');

var activeSlide = 0;

function showSlide(n) {
  slides[activeSlide].classList.remove('active');
  slides[n].classList.add('active');
  activeSlide = n;
}

function nextSlide() {
  showSlide(activeSlide + 1);
}

function prevSlide() {
  showSlide(activeSlide - 1);
}

prev.addEventListener('click', prevSlide);
next.addEventListener('click', nextSlide);

/* 自动播放轮播图 */
setInterval(nextSlide, 3000);