如何修改jQuery幻灯片实现每张幻灯片自定义不同展示时长

步骤1：为每张幻灯片添加时长属性 #

在你的幻灯片<div>元素上新增data-duration自定义属性，值为你需要的展示时长，单位为毫秒，示例如下：

<div id="slideshow">
  <div data-duration="3000">幻灯片1（展示3秒）</div>
  <div data-duration="6000">幻灯片2（展示6秒）</div>
  <div data-duration="4000">幻灯片3（展示4秒）</div>
</div>

步骤2：替换原有JS逻辑 #

原有固定间隔的setInterval无法满足动态时长需求，我们改为递归调用setTimeout实现每张幻灯片按自定义时长切换，修改后代码如下：

// 初始化：隐藏除第一张外的所有幻灯片
$("#slideshow > div:gt(0)").hide();

// 定义幻灯片切换函数
function slideSwitch() {
  // 获取当前显示的第一张幻灯片
  const $current = $('#slideshow > div:first');
  // 获取当前幻灯片的自定义时长，未设置时默认使用5000毫秒
  const duration = $current.data('duration') || 5000;
  
  // 执行切换动画
  $current.fadeOut(1000)
    .next()
    .fadeIn(1000);
  
  // 动画完成后将当前幻灯片移到队列末尾
  setTimeout(function() {
    $current.appendTo("#slideshow");
    // 递归调用切换函数，按当前幻灯片的自定义时长等待后触发下一次切换
    // 如果希望自定义时长是扣除1秒动画后的纯展示时间，这里改成 duration - 1000 即可
    setTimeout(slideSwitch, duration);
  }, 1000);
}

// 首次触发切换，等待第一张幻灯片的展示时长后开始第一次切换
setTimeout(slideSwitch, $('#slideshow > div:first').data('duration') || 5000);

逻辑说明 #

• 替换了原有的固定间隔setInterval，改为每次切换前读取当前幻灯片的自定义时长设置下一次切换的等待时间
• 新增了默认值兜底，如果某张幻灯片没设置data-duration，默认使用5秒展示时长
• 可根据需要调整是否把淡入淡出的1秒动画时间算在展示时长内，代码注释里已经标注了修改位置

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