如何定时切换img的src？能否用jQuery的delay()实现两次切换后停止？

嘿，这个问题问得挺实在的！直接用delay()来切换图片的src属性是行不通的，得先搞明白delay()的本质：它只针对jQuery的动画队列生效——像fadeIn()、slideDown()这类自带队列的动画方法，才能被delay()延迟；而attr('src', ...)这种普通DOM属性操作，根本不会加入动画队列，所以delay()管不着它，会直接立刻执行。

那要实现你要的“1000ms后切第一张，再1000ms切第二张，停在最后一张”的效果，有两种靠谱的方式：

方式一：用原生setTimeout嵌套（最直观） #

这种方式逻辑清晰，新手也容易理解：

// 先选中你的图片元素
const $targetImg = $('#your-image-id');
// 准备好要切换的图片地址数组
const imageList = ['first-switch.jpg', 'final-image.jpg'];

// 第一次延迟切换
setTimeout(() => {
  $targetImg.attr('src', imageList[0]);
  // 第二次延迟切换
  setTimeout(() => {
    $targetImg.attr('src', imageList[1]);
  }, 1000);
}, 1000);

方式二：用queue()配合delay()（贴合jQuery队列思路） #

如果你非要用delay()，就得把属性切换操作塞进动画队列里，用queue()方法来实现：

const $targetImg = $('#your-image-id');
const imageList = ['first-switch.jpg', 'final-image.jpg'];

$targetImg
  // 先等1000ms
  .delay(1000)
  // 把切换操作加入队列
  .queue(function(next) {
    $(this).attr('src', imageList[0]);
    next(); // 必须调用next()，不然队列会卡住，后续操作不执行
  })
  // 再等1000ms
  .delay(1000)
  // 切换到最后一张，这里不用next()因为后面没队列操作了
  .queue(function() {
    $(this).attr('src', imageList[1]);
  });

总结一下：delay()本身不能直接延迟src切换，但通过把操作加入动画队列（用queue()），或者用原生setTimeout，都能完美实现你要的定时切换效果~

内容的提问来源于stack exchange，提问作者Bill Hicks