jquery轮播图代码

admin 2024年02月21日 17:27 38 0

以下是一个简单的jQuery轮播图代码示例：

HTML代码：

<div class="slideshow-container">
  <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代码：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 400px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

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

jQuery代码：

$(document).ready(function() {
  var slides = $('.slide');
  var currentSlide = 0;
  var slideInterval = setInterval(nextSlide, 3000); // 每3秒钟自动切换到下一张幻灯片
  function nextSlide() {
    slides.eq(currentSlide).fadeOut(1000); // 当前幻灯片淡出
    currentSlide = (currentSlide + 1) % slides.length; // 计算下一张幻灯片的索引，如果超出范围则从头开始循环播放
    slides.eq(currentSlide).fadeIn(1000); // 下一张幻灯片淡入
  }
});

这个示例中，轮播图由三个幻灯片组成，每个幻灯片包含一张图片，CSS样式定义了幻灯片的布局和样式，jQuery代码则实现了幻灯片的自动切换和淡入淡出效果。