轮播图js

admin 2024年02月06日 15:31 36 0

轮播图（Carousel）是一种常见的网页设计元素，用于展示一系列图片或内容，下面是一个简单的轮播图 JavaScript 实现示例：

HTML 结构：

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

CSS 样式：

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-item:first-child {
  opacity: 1;
}

JavaScript 代码：

var carousel = document.querySelector('.carousel');
var items = document.querySelectorAll('.carousel-item');
var currentIndex = 0;
var interval = setInterval(nextSlide, 3000); // 每3秒钟自动切换到下一张图片

function nextSlide() {
  items[currentIndex].style.opacity = 0; // 当前图片透明度设为0，隐藏当前图片
  currentIndex = (currentIndex + 1) % items.length; // 下一张图片索引，如果超出数组长度则从头开始循环
  items[currentIndex].style.opacity = 1; // 下一张图片透明度设为1，显示下一张图片
}

这个示例中，我们使用 CSS 来设置轮播图的样式，包括宽度、高度、位置和透明度等，JavaScript 则用来控制轮播图的自动切换和手动切换，在 `nextSlide()` 函数中，我们首先将当前图片的透明度设为0，隐藏当前图片，然后将下一张图片的索引加1，并显示下一张图片，我们使用 `setInterval()` 方法来定时调用 `nextSlide()` 函数，实现自动切换效果。