序列中多个div隐藏和显示

Question

在这段代码中，我希望div在序列中显示和隐藏。 在此代码中，当序列开始时出现第一个div ，在序列到达5号图像后，第一个div被隐藏，第二个div出现。 thesequence达到无7然后， div无2是隐藏和div无3次出现最后当序列到达图像没有15， div无3被隐藏和DIV无4次出现。 这可能吗？

 onload = function startAnimation() { var frames = document.getElementById("animation").children; var frameCount = frames.length; var i = 0, j = 0; var interval = setInterval(function () { frames[i % frameCount].style.display = "none"; frames[++i % frameCount].style.display = "block"; j++; if(j === 14) { clearInterval(interval); } },100); } 

 #animation img { display: none; } #animation img:first-child { display: block; } .d-none{ display:none } .d-block{ display:block; } 

 <div id="animation"> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" /> </div> <div class="d-block"> this div is aappear1 </div> <div class="d-none"> this div is aappear2 </div> <div class="d-none"> this div is aappear3 </div> <div class="d-none"> this div is aappear4 </div> 

Answer 1

这是我的解决方案，我根据当前图片的索引进行了显示/隐藏div

 onload = function startAnimation() { var frames = document.getElementById("animation").children; var frameCount = frames.length; var i = 0, j = 0; var interval = setInterval(function() { frames[i % frameCount].style.display = "none"; frames[++i % frameCount].style.display = "block"; j++; if (i == 4) { showdiv(2) } if (i == 6) { showdiv(3) } if (i == 14) { showdiv(4) } if (j === 14) { clearInterval(interval); } }, 100); } function showdiv(index) { var previous = index - 1; var current = index; document.getElementById("div" + previous.toString()).className = "d-none"; document.getElementById("div" + current.toString()).className = "d-block"; } 

 #animation img { display: none; } #animation img:first-child { display: block; } .d-none { display: none } .d-block { display: block; } 

 <div id="animation"> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" /> </div> <div id="div1" class="d-block"> this div is aappear1 </div> <div id="div2" class="d-none"> this div is aappear2 </div> <div id="div3" class="d-none"> this div is aappear3 </div> <div id="div4" class="d-none"> this div is aappear4 </div> 

Answer 2

您甚至不需要JS来执行此操作，最简单的方法是通过CSS，看看：

 #list { margin: 2em auto; padding: 0; max-width: 600px; list-style: none; height: 15em; } #list li { float: left; width: 100px; height: 100px; margin: 0 5px; background: #ccc; text-align: center; line-height: 100px; opacity: 0; animation: fadeIn 1s ease-in both; } #list li:nth-child(2) { animation-delay: 1s; } #list li:nth-child(3) { animation-delay: 2s; } #list li:nth-child(4) { animation-delay: 3s; } #list li:nth-child(5) { animation-delay: 4s; } @keyframes fadeIn { from { opacity: 0; transform: translate3d(0, -20%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } 

 <ul id="list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> 

Answer 3

可以这样做，考虑到j是已加载图像的计数器，您只需要测试此数字是否< 5然后显示#div1并隐藏其余部分， #div1 ...

请考虑这不是最佳解决方案，有很多方法可以增强它。 快乐编码：D

 onload = function startAnimation() { var frames = document.getElementById("animation").children; var frameCount = frames.length; var i = 0, j = 1; var interval = setInterval(function () { if(j < 5 ){ document.getElementById("div1").style.display = "block"; document.getElementById("div2").style.display = "none"; document.getElementById("div3").style.display = "none"; document.getElementById("div4").style.display = "none"; }else if(j < 7 && j >= 5){ document.getElementById("div2").style.display = "block"; document.getElementById("div1").style.display = "none"; document.getElementById("div3").style.display = "none"; document.getElementById("div4").style.display = "none"; }else if(j >= 7 && j < 15){ document.getElementById("div3").style.display = "block"; document.getElementById("div1").style.display = "none"; document.getElementById("div2").style.display = "none"; document.getElementById("div4").style.display = "none"; }else if(j == 15){ document.getElementById("div4").style.display = "block"; document.getElementById("div2").style.display = "none"; document.getElementById("div3").style.display = "none"; document.getElementById("div1").style.display = "none"; } frames[i % frameCount].style.display = "none"; frames[++i % frameCount].style.display = "block"; j++; if(j > 15) { clearInterval(interval); j = 1; } },100); } 

 #animation img { display: none; } #animation img:first-child { display: block; } .d-none{ display:none } .d-block{ display:block; } 

 <div id="animation"> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" /> </div> <div class="d-block" id="div1"> this div is aappear1 </div> <div class="d-none" id="div2"> this div is aappear2 </div> <div class="d-none" id="div3"> this div is aappear3 </div> <div class="d-none" id="div4"> this div is aappear4 </div>