快速上手JS实现首页轮番图

前端

2023-12-03 21:10:09

一、轮番图概述

轮番图，又称轮播图，是一种在网页或移动应用中常见的交互元素。它允许用户通过鼠标点击或手指滑动，在一个模块或窗口中查看多张图片。轮番图可以用于展示产品、活动、新闻等内容，具有直观、生动、吸引眼球等特点。

二、JS实现轮番图

1. 准备工作

在开始实现轮番图之前，我们需要先准备一些东西：

几张用于展示的图片
一个HTML文件
一个CSS文件
一个JavaScript文件

2. HTML结构

首先，我们需要在HTML文件中创建轮番图的容器元素。通常，我们可以使用<div>元素作为容器。然后，在容器元素中添加<img>元素来展示图片。

<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>

3. CSS样式

接下来，我们需要在CSS文件中为轮番图添加样式。我们可以使用display: flex属性将图片水平排列，并使用flex-direction: row属性使其从左到右排列。

#carousel {
  display: flex;
  flex-direction: row;
}

#carousel img {
  width: 100%;
  height: auto;
}

4. JavaScript逻辑

最后，我们需要在JavaScript文件中编写逻辑代码来实现轮番图的自动播放和手动控制。我们可以使用setInterval()函数来实现自动播放，并使用addEventListener()函数来实现手动控制。

const carousel = document.getElementById('carousel');
const images = carousel.getElementsByTagName('img');
let currentImageIndex = 0;

// 自动播放
setInterval(() => {
  currentImageIndex++;
  if (currentImageIndex >= images.length) {
    currentImageIndex = 0;
  }
  showImage(currentImageIndex);
}, 3000);

// 手动控制
carousel.addEventListener('click', (event) => {
  const target = event.target;
  if (target.tagName === 'IMG') {
    currentImageIndex = Array.from(images).indexOf(target);
    showImage(currentImageIndex);
  }
});

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