HTML/CSS/JS实现轮播图

最新推荐文章于 2024-12-02 11:58:17 发布

原创最新推荐文章于 2024-12-02 11:58:17 发布 · 628 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

该代码创建了一个图片轮播功能，使用CSS进行样式布局，通过JavaScript控制图片的显示和切换效果。轮播图由多个绝对定位的图片元素组成，利用透明度变化实现平滑过渡。默认显示第一张图片，通过定时器自动每隔3秒切换到下一张图片。

<div class="slideshow-container">
  <div class="slideshow-slide active">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slideshow-slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <div class="slideshow-slide">
    <img src="image3.jpg" alt="Slide 3">
  </div>
</div>

.slideshow-container {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-slide.active {
  opacity: 1;
}

const slides = document.querySelectorAll('.slideshow-slide');
let currentSlide = 0;

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

function nextSlide() {
  let index = (currentSlide + 1) % slides.length;
  showSlide(index);
}

function prevSlide() {
  let index = currentSlide - 1;
  if (index < 0) {
    index = slides.length - 1;
  }
  showSlide(index);
}

setInterval(nextSlide, 3000);

通过一个包含所有图片的父容器，每个图片都是一个绝对定位的元素，只有当前图片的透明度是1，其余的透明度是0。

为了避免初次进入界面时，图片不显示的问题，为第一张图片设置类名为“active”，使第一张图片的透明度为1。

每张图片都有一个过渡效果，当前图片变为不活动状态时，透明度会渐渐变为0；当下一张图片变为活动状态时，透明度会渐渐变为1。

在JS代码中

1.函数showSlide(index)

接受一个索引参数，表示要显示哪个图片

首先将当前图片的透明度设置为0，然后将目标图片的透明度设置为1，并将当前图片的索引更新为目标图片的索引

2. 函数nextSlide()

将当前图片的索引加1，然后调用showSlide()函数来显示下一张图片

3. 函数prevSlide()

将当前图片的索引减1，当前图片为第一张时，切换到最后一张图片，然后调用showSlide()函数来显示上一张图片

3. setInterval()函数