Jquery 逐个交换图像

只需使用js对象和队列即可.

JS:

var images = {
  "Lorem Ipsum" : "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg",
  "simply dummy text" : "https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg",
  "specimen book" : "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg",
  "the printing" : "https://cdn.pixabay.com/photo/2023/09/04/18/08/sunflower-8233332_960_720.jpg",
  "typesetting industry": "https://cdn.pixabay.com/photo/2012/06/19/10/32/owl-50267_960_720.jpg",
};

$(document).ready(function(){

  const keys = Array.from(Object.keys(images));

  function swapImages(){
    // for forward
    keys.splice(0, 0, keys.pop());  // take out the last and push to first
  
    // for backward
    // keys.push( keys.shift() );  // take out the first and push to last
  
    keys.forEach((key, i) => {
      img = images[key];
      const span = $($(".image-swap span")[i])
      $('img', span).prop('src', img);    // update image
      $('label', span).html(key);         // Update text
    });
  }
  
  swapImages();
  setInterval(swapImages, 3000); 
});

Html:

<div class="image-swap">
  <span>
    <img class="large" src="">
    <label></label>
  </span>
  <div class='wrap'>
    <span> <img src=""> <label></label> </span>
    <span> <img src=""> <label></label> </span>
    <span> <img src=""> <label></label> </span>
    <span> <img src=""> <label></label> </span>
  </div>
</div>

Css:以下内容:

.image-swap{
  display: flex;
  gap: 10px;
  flex-direction: row;
}

.image-swap .wrap{
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap:wrap;
}

.image-swap span{
  position: relative;
}

.image-swap label{
  position: absolute;
  color: #fff;
  font-weight: bold;
  bottom: 30px;
  left: 15px;
}

.image-swap img{
  width: auto;
  height: 200px;
}

.image-swap img.large{
  width: auto;
  height: 400px;
}

JSfiddle演示: https://jsfiddle.net/Dananjaya/j15osLbx/113/ https://jsfiddle.net/Dananjaya/j15osLbx/113/ https://jsfiddle.net/Dananjaya/j15osLbx/113/