如何编写实现图片每3秒自动切换至下一张的jQuery代码？

实现步骤与代码 #

首先准备基础HTML结构，用容器包裹所有轮播图片：

<div class="image-slider">
  <img src="img1.jpg" alt="图片1" class="slide active">
  <img src="img2.jpg" alt="图片2" class="slide">
  <img src="img3.jpg" alt="图片3" class="slide">
</div>

添加CSS让图片重叠，默认仅显示带active类的图片：

.image-slider {
  position: relative;
  width: 600px; /* 按需调整宽度 */
  height: 400px; /* 按需调整高度 */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover; /* 保持图片比例 */
}

.slide.active {
  display: block;
}

以下是jQuery核心逻辑，实现3秒自动切换：

$(document).ready(function() {
  const slides = $('.slide');
  let currentIndex = 0;
  const slideCount = slides.length;
  const intervalTime = 3000; // 切换间隔（毫秒）

  // 切换图片函数
  function switchSlide() {
    slides.eq(currentIndex).removeClass('active');
    currentIndex = (currentIndex + 1) % slideCount; // 循环回到第一张
    slides.eq(currentIndex).addClass('active');
  }

  // 启动自动轮播
  let sliderInterval = setInterval(switchSlide, intervalTime);

  // 可选：鼠标悬停暂停，离开继续
  $('.image-slider').hover(
    () => clearInterval(sliderInterval),
    () => sliderInterval = setInterval(switchSlide, intervalTime)
  );
});

关键说明 #

• 用setInterval定时触发切换逻辑，间隔3秒
• 通过eq()定位图片，依赖active类控制显示状态
• (currentIndex + 1) % slideCount实现循环轮播，避免索引越界
• 可选的hover暂停功能可根据需求删除

内容的提问来源于stack exchange，提问作者Nem mem