时间戳

首页 > 解决方案 > 如何使用setTimeout在无限循环中循环每个div的显示属性到“display：none”到“display：block”？

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

问题描述

我有一个显示 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);
})

标签： javascripthtmljquerycss

解决方案

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

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>

推荐阅读