实现无触发的图片自动连续切换功能求助

云上老周

2026-7-1

实现图片自动连续依次切换的修改方案

把原来的hover触发逻辑改成自动循环切换很简单，核心是用setInterval定时执行切换操作，同时维护一个索引来依次遍历图片数组。以下是修改后的完整代码：

修改后的代码

HTML

<span id="western-wrapper">
       <img id="western" class="img2" src="https://cdn1.iconfinder.com/data/icons/logos-brands-in-colors/436/Google_Pay_GPay_Logo-512.png" />
</span>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

注：你原来重复引入了jQuery和未使用的GSAP库，这里只保留必要的jQuery即可

CSS

.img2 {
  max-width: 110px;
  margin-bottom: 0.1px;
}

JavaScript

var western = [
  "https://cdn1.iconfinder.com/data/icons/logos-brands-in-colors/436/Google_Pay_GPay_Logo-512.png",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Apple_Pay_logo.svg/2560px-Apple_Pay_logo.svg.png",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Klarna_Payment_Badge.svg/2560px-Klarna_Payment_Badge.svg.png"
];

// 维护当前显示的图片索引
let currentIndex = 0;
// 设置切换间隔（毫秒，这里是3秒）
const switchInterval = 3000;

function switchWesternImage() {
  // 更新索引，到数组末尾后重置为0，实现循环
  currentIndex = (currentIndex + 1) % western.length;
  const imageUrl = western[currentIndex];
  $("#western").attr("src", imageUrl);
  console.log("切换到：", imageUrl);
}

// 页面加载后启动定时器，自动开始切换
$(function() {
  // 每隔switchInterval毫秒执行一次切换函数
  setInterval(switchWesternImage, switchInterval);
});