如何使用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>