CODEWITHSUNDEEP
javascripthtmlcssarrays
Sara J
Sara J

Reputation: 61

Stop animation after 3 loops

I'm trying to get a looping slideshow to stop looping after 3 times and have it end on the last frame. It's a 300x250 web banner with 3 different frames. Any help would be appreciated, thank you!

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

Upvotes: 1

Views: 503

Answers (2)

KuldipKoradia
KuldipKoradia

Reputation: 3031

please add Jquery to your code and use my snippet code.

setTimeout(function(){
  $('#frames a').addClass('stop_animation');
},17000);
$('#frames a').click(function(){
  $('#frames a').addClass('stop_animation');
});
#frames{
  width: 300px;
  height: 250px;
  overflow:hidden;
  position:relative;
}
#frames a{
  position:absolute;
  animation: fader 6s 3;
  -webkit-animation: fader 6s 3;
  opacity:0;
  width:100%;
  height: 100%;
}
#frames a:nth-child(1){-webkit-animation-delay:0s;}
#frames a:nth-child(2){-webkit-animation-delay:2s;}
#frames a:nth-child(3){-webkit-animation-delay:4s;}
@-webkit-keyframes fader{   
  25%{opacity:1;}
  40%{opacity:0;}
}
#frames a.stop_animation{
  animation-play-state: paused;
  opacity: 1;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
  <div id="frames">
    <a href="#" onclick="javascript:window.open(window.clickTag1)"><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg"></a>
    <a href="#" onclick="javascript:window.open(window.clickTag2)"><img src="http://transativafm.com.br/wp-content/uploads/2018/03/anuncie-300x250.png"></a>
    <a href="#" onclick="javascript:window.open(window.clickTag3)"><img src="https://www.portalmongagua.com.br/images/anuncios/54dc18565648636b421710d98b2def02.png"></a>
  </div>
</body>
</html>

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

Hey I made an example how you could animate 3 iterations. Note that I wrote some dummy code that is not refactored or a fully implemented slider at all. But it shows the principle.

What happens is that if you click the button it will 'plan' 3 animation cycles at a 5000ms interval.

Alternatively you could recurse the animations instead of planning them to make the code a bit more flexible.

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>

Note: You can do the same with css by setting various animation delays to different elements. This would however be quite inflexible.

Upvotes: 1

Related Questions