实现Div间图片与标题循环交换效果（参考e-Zest Insights）

实现思路 #

要实现第1个Div的图片替换第2个Div的图片、第2个替换第3个，以此类推的循环交换效果，我们需要：

• 获取所有参与交换的图片元素
• 每次交换前保存所有图片的当前地址
• 按顺序将前一个图片的地址赋值给后一个，最后一个图片使用第一个的原始地址完成循环

修改后的完整代码 #

HTML

<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'></script>
<div class='container'>
  <div class='row'>
    <div class='col'>
      <img class='swap-image' src='https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg' alt=''>
    </div>
    <div class='col'>
      <img class='swap-image' src='https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg' alt=''>
    </div>
    <div class='col'>
      <img class='swap-image' src='https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg' alt=''>
    </div>
  </div>
</div>

CSS

body {
  padding: 20px;
}

img {
  max-height: 100px;
  transition: all 0.3s ease; /* 添加过渡动画让交换更平滑 */
}

JavaScript

// 获取所有参与交换的图片元素
const swapImages = document.querySelectorAll('.swap-image');

function cyclicSwapImages() {
  // 保存所有图片的当前src
  const srcs = Array.from(swapImages).map(img => img.src);
  
  // 从倒数第二个图片开始，依次替换为前一个的src
  for (let i = swapImages.length - 1; i > 0; i--) {
    swapImages[i].src = srcs[i - 1];
  }
  
  // 第一个图片替换为最后一个的原始src，实现循环
  swapImages[0].src = srcs[swapImages.length - 1];
}

// 设置定时器，每1.5秒执行一次交换
setInterval(cyclicSwapImages, 1500);

补充说明 #

• 给所有需要交换的图片添加统一类名swap-image，方便批量获取元素
• 交换前先保存所有图片地址，避免替换过程中覆盖原始值
• 加入CSS过渡动画，让图片切换效果更自然流畅
• 循环逻辑：最后一个图片的地址会回到第一个位置，形成无限循环

内容的提问来源于stack exchange，提问作者Adam Pablo