精雕细琢原生JS轮播图：华丽炫酷的第二种方法

前端

2024-01-01 05:30:42

在之前的文章中，我们展示了如何使用原生JS制作精美的轮播图，但是小伙伴们可能觉得那有点平淡无奇。那么，我们现在就来分享一种更炫酷的轮播图制作方法，让你大开眼界！

现在，让我们开始我们的轮播图创作之旅，见证原生JS的强大魅力！

原生JS轮播图的进阶之道

原理简介

这种方法的精髓在于，通过操控所有图片的 display 属性，轮番展示轮播图中的图片。当一张图片处于活动状态时，它的 display 属性为 block，而其他图片则保持隐藏状态（display: none）。

HTML结构

首先，我们需要一个包含所有轮播图图片的容器，以及一个负责图片切换的按钮容器。HTML结构如下：

<div class="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="" />
    <img src="image2.jpg" alt="" />
    <img src="image3.jpg" alt="" />
  </div>
  <div class="carousel-buttons">
    <button id="prev-btn">Previous</button>
    <button id="next-btn">Next</button>
  </div>
</div>

JavaScript代码

接下来，让我们编写JavaScript代码，实现图片切换功能：

// 缓存元素
const carouselImages = document.querySelector('.carousel-images');
const carouselButtons = document.querySelector('.carousel-buttons');
const prevBtn = document.querySelector('#prev-btn');
const nextBtn = document.querySelector('#next-btn');

// 索引变量，用于跟踪当前显示的图片
let currentIndex = 0;

// 图片切换函数
const switchImage = (direction) => {
  // 根据方向调整索引
  if (direction === 'prev') {
    currentIndex--;
  } else if (direction === 'next') {
    currentIndex++;
  }

  // 边界检查
  if (currentIndex < 0) {
    currentIndex = carouselImages.children.length - 1;
  } else if (currentIndex >= carouselImages.children.length) {
    currentIndex = 0;
  }

  // 切换图片
  for (let i = 0; i < carouselImages.children.length; i++) {
    if (i === currentIndex) {
      carouselImages.children[i].style.display = 'block';
    } else {
      carouselImages.children[i].style.display = 'none';
    }
  }
};

// 事件监听器
prevBtn.addEventListener('click', () => switchImage('prev'));
nextBtn.addEventListener('click', () => switchImage('next'));

样式（CSS）

最后，添加一些CSS样式，让轮播图美观大方：

.carousel {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}

.carousel-images {
  width: 100%;
  height: 100%;
  display: flex;
}

.carousel-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.carousel-images img:first-child {
  display: block;
}

.carousel-buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-buttons button {
  margin: 0 10px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}