使用jQuery按指定间隔在Div中轮播图片或视频的实现问题

嘿，我看你现在需要实现依次加载图片/视频、按指定间隔播放后切换下一个媒体的功能，你的代码片段里存在几个关键问题，我帮你梳理并给出修正后的方案：

原代码的问题分析 #

1. 踩了闭包陷阱：循环里用了var i，但setTimeout是异步的，等回调执行时，i已经变成循环结束后的最大值了，根本拿不到当前循环对应的媒体项。
2. 索引写错啦：sec = side_block_src[side_block_src].interval*1000这里的索引明显不对，应该是side_block_src[i].interval才对。
3. 异步逻辑没理清：直接在循环里堆setTimeout会导致所有定时器几乎同时触发，完全达不到“依次切换”的效果，因为循环会瞬间跑完，定时器会扎堆执行。

修正后的实现方案 #

我推荐用递归函数来处理，这样能严格保证上一个媒体播放完指定间隔后，再加载下一个，逻辑更清晰：

var side_block_src = [
    {media:'images/172422009.jpg',interval:10}, 
    {media:'images/172422001.jpg',interval:50}, 
    {media:'images/172422009.jpg',interval:4} 
];

// 当前播放的媒体索引
var currentIndex = 0;

function playNextMedia() {
    if (currentIndex >= side_block_src.length) {
        // 这里可选：播放完所有媒体后重置索引循环播放，或者直接停止
        currentIndex = 0;
        // 要是不需要循环，就换成return;
        // return;
    }
    
    var mediaItem = side_block_src[currentIndex];
    var mediaUrl = mediaItem.media;
    var interval = mediaItem.interval * 1000; // 把秒转成毫秒
    
    console.log(`开始加载第${currentIndex+1}个媒体: ${mediaUrl}`);
    
    // 区分图片和视频，处理不同的加载逻辑
    if (mediaUrl.match(/\.(jpg|png|gif)$/i)) {
        // 图片加载：替换容器里的内容为图片
        $('#setdata').html(`<img src="${mediaUrl}" alt="轮播图片" style="width:100%;">`);
    } else if (mediaUrl.match(/\.(mp4|webm|mov)$/i)) {
        // 视频加载：可以用video标签或者iframe，这里用video举例
        $('#setdata').html(`<video src="${mediaUrl}" autoplay muted style="width:100%;"></video>`);
        // 要是想等视频播放完再切换，就注释掉下面的setTimeout，改用事件监听：
        // $('#setdata video').on('ended', function() {
        //     currentIndex++;
        //     playNextMedia();
        // });
    }
    
    // 按指定间隔切换到下一个媒体
    setTimeout(function() {
        currentIndex++;
        playNextMedia();
    }, interval);
}

// 启动轮播
playNextMedia();

额外说明 #

• 递归的好处：通过函数自身调用，完美避免了循环里的闭包问题，而且能严格控制媒体切换的顺序，必须等上一个的间隔时间到了才会加载下一个。
• 媒体类型扩展：你可以根据自己实际用到的媒体格式，扩展正则表达式里的后缀。
• iframe适配：如果你原本是用iframe加载媒体，只需要把html替换的部分改成你需要的iframe代码就行，比如：

$('#setdata>iframe').attr('src', mediaUrl);

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