正文

用原生JS实现轮播，只需掌握基本的DOM操作和事件监听。以下是一个简单的轮播图实现步骤： 1. **HTML结构**：创建一个轮播容器，包含多个轮播项。 2. **CSS样式**：设置轮播容器的样式，包括轮播项的显示和隐藏。 3. **JavaScript逻辑**： - 初始化轮播图，设置当前显示的轮播项。 - 设置定时器，实现自动轮播。 -

/0 浏览量
0917

想要在网页中添加一个动态的轮播图，而不依赖任何外部库，通过原生JavaScript实现就是一个不错的选择。下面，我将一步步带你完成一个基础的轮播图制作。

HTML结构搭建

首先，我们需要构建轮播图的HTML结构。这是一个轮播图的核心，它定义了轮播图的外观和内容。

<div class="carousel">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

这里，我们创建了一个包含三个图片的div元素，每个图片都是一个轮播项。当前显示的图片通过添加active类来控制。

CSS样式设计

接下来，我们需要对轮播图进行样式设计。以下是一些基本的CSS规则，用于设置轮播容器的尺寸、溢出隐藏和轮播项的显示与隐藏。

.carousel {
  width: 600px;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.carousel img {
  width: 100%;
  display: none;
}
.carousel img.active {
  display: block;
}

在这里，我们设置了轮播图的宽度为600像素，高度为300像素，并且当内容超出这个范围时，超出部分不会显示。轮播项默认是隐藏的，只有当它被赋予active类时才会显示。

JavaScript逻辑实现

最后，我们使用JavaScript来添加动态效果。

初始化轮播图

在JavaScript中，我们首先需要获取轮播图元素和其中的所有图片元素，并设置当前显示的轮播项索引。

const carousel = document.querySelector('.carousel');
const images = carousel.querySelectorAll('img');
let currentIndex = 0; // 当前显示的轮播项索引

自动轮播

为了实现自动轮播，我们可以使用setInterval函数来设置一个定时器，每隔一段时间自动切换到下一张图片。

let interval = setInterval(() => {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % images.length;
  images[currentIndex].classList.add('active');
}, 3000);

手动切换轮播项

为了让用户能够手动控制轮播，我们需要添加事件监听器来监听鼠标的悬停和移出事件。当鼠标悬停在轮播图上时，停止自动轮播；当鼠标移开时，重新启动自动轮播。

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

carousel.addEventListener('mouseout', () => {
  interval = setInterval(() => {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('active');
  }, 3000);
});

完整代码示例

将上述代码组合在一起，就形成了一个完整的原生JavaScript轮播图实现。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>原生JS轮播图</title>
<style>
  .carousel {
    width: 600px;
    height: 300px;
    overflow: hidden;
    position: relative;
  }
  .carousel img {
    width: 100%;
    display: none;
  }
  .carousel img.active {
    display: block;
  }
</style>
</head>
<body>
<div class="carousel">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

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

  let interval = setInterval(() => {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('active');
  }, 3000);

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

  carousel.addEventListener('mouseout', () => {
    interval = setInterval(() => {
      images[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].classList.add('active');
    }, 3000);
  });
</script>
</body>
</html>

现在，你已经拥有了一个基本的轮播图，可以展示在你的网页上了。你可以根据需要进一步扩展其功能，比如添加指示器、控制按钮等。

-- 展开阅读全文 --