时间戳

首页 > 解决方案 > 3 次循环后停止动画

javascript - 3 次循环后停止动画

问题描述

我试图让循环幻灯片在 3 次后停止循环，并在最后一帧结束。这是一个具有 3 个不同框架的 300x250 网络横幅。任何帮助将不胜感激，谢谢！

<style>
  #frames {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 300px;
    height: 250px;
  }
  #frames a {
    position: absolute;
  }
  #frames a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 3s;
    animation-duration: 1s;
    z-index: 20;
  }
  #frames a:nth-of-type(2) {
    z-index: 10;
  }
  #frames a:nth-of-type(n+3) {
    display: none;
  }
  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }
</style>

<div id="frames">
  <a href="#" onclick="javascript:window.open(window.clickTag1)"><img src="01.jpg"></a>
  <a href="#" onclick="javascript:window.open(window.clickTag2)"><img src="02.jpg"></a>
  <a href="#" onclick="javascript:window.open(window.clickTag3)"><img src="03.jpg"></a>
</div>

<script>
  window.addEventListener("DOMContentLoaded", function(e) {
  var frames = document.getElementById("frames-1");
  var fadeComplete = function(e) { frames.appendChild(arr[0]); };
  var arr = frames.getElementsByTagName("a");
  for(var i=0; i < arr.length; i++) {
   arr[i].addEventListener("animationend", fadeComplete, false);
  }
 }, false);
</script>

标签： javascripthtmlcssarrays

解决方案

嘿，我举了一个例子，你可以如何动画 3 次迭代。请注意，我编写了一些没有重构或完全实现滑块的虚拟代码。但它显示了原理。

发生的情况是，如果您单击按钮，它将以 5000 毫秒的间隔“计划”3 个动画周期。

或者，您可以递归动画而不是计划它们以使代码更加灵活。

var currentlySelectedNode = 0;
var nodes = document.querySelectorAll('#container>div');
var nextButton = document.getElementById('next');

function showNode( node ) {
  node.classList.add('show');
}
function hideNode( node ) {
  node.classList.remove('show');
}
function showNextNode() {
  hideNode( nodes[currentlySelectedNode] );
  
  if( currentlySelectedNode < nodes.length - 1 )
    currentlySelectedNode++;
  else
    currentlySelectedNode = 0;
    
  showNode( nodes[currentlySelectedNode] );
}
function showNext3Nodes() {
  showNextNode();
  
  window.setTimeout( ()=>{
    showNextNode();
  }, 5000);
  
  window.setTimeout( ()=>{
    showNextNode();
  }, 10000);
}

nextButton.addEventListener('click', function() {
  showNext3Nodes();
});

showNode(nodes[0]);
#container{
  position: relative;
  height: 100px;
  width: 100px;
}
#container>div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  transition: opacity 2s;
}
#container>div.show{
  opacity: 1;  
}
<div id='container'>
  <div class='show' style='background: red'></div>
  <div style='background: blue'></div>
  <div style='background: green'></div>
  <div style='background: yellow'></div>
  <div style='background: purple'></div>
  <div style='background: orange'></div>
</div>

<button id='next'>Next(3)</button>

注意：您可以通过为不同的元素设置各种动画延迟来对 css 执行相同的操作。然而，这将是相当不灵活的。

推荐阅读