如何使用setTimeout在无限循环中循环每个div的显示属性到“display：none”到“display：block”？

Question

我有一个显示 gif 图像的 div，我有 4 个 gif 图像在无限循环中以不同的持续时间循环（gif 应该循环通过 1 2 3 4 然后 1 2 3 4 无休止）

我的 gifplayer div：除了第一个 div 之外，其他 4 个 div 的初始显示属性设置为 none

<div id="gifplayer"><img id="gif1" class="gifimg" src="gif1.gif">
<div id="gifplayer"><img id="gif2" class="gifimg" src="gif2.gif" style="display:none;>
<div id="gifplayer"><img id="gif3" class="gifimg" src="gif3.gif" style="display:none;>
<div id="gifplayer"><img id="gif4" class="gifimg" src="gif4.gif" style="display:none;>

每个 gif 都有不同的持续时间，我想在无限循环中互相播放。 下面是我的 jQuery 它可以工作，但只是第一次，而且只有第一个 gif 按预期播放第二、第三和第四个 gif 突然结束：jQuery：

$(document).ready(function() {
    setTimeout(function(){ 
        $("#gif1").css("display","none") 
        $("#gif2").css("display","block") 
        $("#gif3").css("display","none") 
        $("#gif4").css("display","none") 
    }, 16000);
    setTimeout(function(){ 
        $("#gif1").css("display","none") 
        $("#gif2").css("display","none") 
        $("#gif3").css("display","block") 
        $("#gif4").css("display","none") 
    }, 18000);
    setTimeout(function(){ 
        $("#gif1").css("display","none") 
        $("#gif2").css("display","none") 
        $("#gif3").css("display","none") 
        $("#gif4").css("display","block") 
    }, 67800);
    setTimeout(function(){ 
        $("#gif1").css("display","block") 
        $("#gif2").css("display","none") 
        $("#gif3").css("display","none") 
        $("#gif4").css("display","none") 
    }, 16000);
})

Answer 1

• 使用模运算符%将i计数器重置回0
• 使用classList的.remove()和.add()方法
• 使用data-*属性存储所需的毫秒持续时间，然后使用Element.dataset在 JS 中读取它

 const gifify = (EL) => { const IMGS = EL.querySelectorAll("img"); const tot = IMGS.length; let i = 0; (cycle = () => { const IMG = IMGS[i]; const dur = IMG.dataset.duration || 100; // ms (Fallback to 100ms) IMGS.forEach(EL => EL.classList.remove("show")); // Hide all IMG.classList.add("show"); // Show one i += 1; // Increment index i %= tot; // Loop index setTimeout(cycle, dur ); })(); }; document.querySelectorAll(".gifify").forEach(gifify);

 .gifify img { display: none; }.gifify img.show { display: block; }

 Infinite cycle trough images with different duration: <div class="gifify"> <img data-duration="300" src="//www.placehold.it/100x100/0bf?text=1"> <img data-duration="500" src="//www.placehold.it/100x100/fb0?text=2"> <img data-duration="400" src="//www.placehold.it/100x100/f0b?text=3"> <img data-duration="100" src="//www.placehold.it/100x100/b0f?text=4"> </div>