Question

在此代码中，我希望div在序列中显示和隐藏。在此代码中，当序列开始时，首先出现div，在序列到达图像5之后，隐藏第一个div并出现第二个div。然后在这些序列达到7之后，隐藏div no 2并且出现div no 3，最后当序列到达图像no 15时，隐藏div no 3并且出现div no 4。这可能吗？

＆＃13;

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); 
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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";
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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并隐藏其余部分等。 ..

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

＆＃13;

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); 
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

多个div在序列中隐藏和显示

3 个答案: