js轮播图代码

admin 2023年12月14日 05:04 35 0

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

我们需要HTML结构来放置图片：

<div id="carousel">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- 可以添加更多图片 -->
</div>

我们使用CSS来样式化轮播图：

#carousel {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: auto;
}

我们使用JavaScript来控制轮播图的切换：

// 获取所有的轮播图幻灯片
var slides = document.querySelectorAll('#carousel .slide');
var currentSlide = 0; // 当前显示的幻灯片索引
var slideInterval = 3000; // 幻灯片切换间隔（毫秒）
var slideShowInterval; // 用于存储幻灯片切换的定时器

// 显示第一个幻灯片
slides[0].style.display = 'block';

// 设置定时器，每隔一段时间切换到下一个幻灯片
slideShowInterval = setInterval(function() {
  // 隐藏当前幻灯片
  slides[currentSlide].style.display = 'none';
  // 计算下一个幻灯片的索引（循环到第一个幻灯片）
  currentSlide = (currentSlide + 1) % slides.length;
  // 显示下一个幻灯片
  slides[currentSlide].style.display = 'block';
}, slideInterval);

这就是一个基本的轮播图实现，你可以根据需要添加更多的功能，比如导航按钮、指示器、自动播放/暂停等。