手写轮播图创造动感浏览体验

2023-03-24 09:12:50

用 JavaScript 手写轮播图：打造动态而美观的图像展示

什么是轮播图？

轮播图是一种在网页上动态呈现图像的常用设计元素。它们被广泛用于展示产品、图片、新闻和其他引人注目的内容，提升网站的视觉吸引力。

轮播图背后的原理

轮播图的工作原理是使用 JavaScript 来控制图像的显示顺序。当用户访问网页时，JavaScript 会显示第一张图像。然后，它会定期自动切换图像，展示下一张。当用户将光标悬停在轮播图上时，JavaScript 会暂停图像切换。当用户将光标移出时，图像切换会继续。

手写轮播图的步骤

1. 创建 HTML 结构

首先，需要创建一个 HTML 结构来容纳轮播图，其中包括要显示的图像。

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

2. 添加样式

接下来，为轮播图添加样式以控制其外观。

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

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

3. 添加 JavaScript 代码

最后，使用 JavaScript 控制轮播图的动态效果。

const carousel = document.querySelector('.carousel');
const images = carousel.querySelectorAll('img');
let currentIndex = 0;

setInterval(() => {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }

  for (let i = 0; i < images.length; i++) {
    images[i].classList.remove('active');
  }

  images[currentIndex].classList.add('active');
}, 3000);

carousel.addEventListener('mouseenter', () => {
  clearInterval(interval);
});

carousel.addEventListener('mouseleave', () => {
  interval = setInterval(() => {
    currentIndex++;
    if (currentIndex >= images.length) {
      currentIndex = 0;
    }

    for (let i = 0; i < images.length; i++) {
      images[i].classList.remove('active');
    }

    images[currentIndex].classList.add('active');
  }, 3000);
});