轮播效果 - 在第一次迭代后使项目消失

Question

所以我试图让旋转木马中的每个项目在每次迭代后再次消失。循环不断重复，但项目不会消失。这是codepen代码。

任何帮助将不胜感激。感谢..

＆＃13;

＆＃13;

$(function() {
  var $items = $('img','.container');
  var currentIdx = 0;
  // var timer;

  var cycleItems = function() {
    console.log('Running from cycleItems');
   
    
  $items.each(function(index, item) {
    var $self = $(item);
    
    setTimeout(function() {
      
      console.log(`We are at this item: ${item}`);        
      console.log('currentindex has value : ' + currentIdx );
      console.log('And we are at this  index: ' + index );        
      $self.removeClass('isHidden').addClass('isActive');
      currentIdx++ 

     }, 1000*index); /* End of setTimeOut */
              
    if ( index == $items.length - 1 ) {      
    //  item.removeClass('isActive').addClasss('isHidden'); 
      console.log('Items : '+ $items);
      setTimeout( cycleItems, (index + 1) * 1000);
    }
      
    }) /* End of each */
    
  } /* End of cycleItems func */
  
  cycleItems();
  
});   

＆＃13;

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background: black;
}
.container {
  display: inline;
  //border: 1px solid white;

}
.slide {} .isActive {
  visibility: visible;
}
.isHidden {
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <img class='isActive' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Palo在评论中说，只需添加$（“img”）。addClass（“isHidden”）。

代码：

$(function() {
  var $items = $('img','.container');
  var currentIdx = 0;
  // var timer;

  var cycleItems = function() {
    console.log('Running from cycleItems');


  $items.each(function(index, item) {
    var $self = $(item);

    setTimeout(function() {

      console.log(`We are at this item: ${item}`);        
      console.log('currentindex has value : ' + currentIdx );
      console.log('And we are at this  index: ' + index );    

      $("img").addClass("isHidden") /* inputted piece of code */

      $self.removeClass('isHidden').addClass('isActive');

      currentIdx++ 

     }, 1000*index); /* End of setTimeOut */

    if ( index == $items.length - 1 ) {      
    //  item.removeClass('isActive').addClasss('isHidden'); 
      console.log('Items : '+ $items);
      setTimeout( cycleItems, (index + 1) * 1000);
    }

    }) /* End of each */

  } /* End of cycleItems func */

  cycleItems();
  //clearTimeout(timer);

  /*var toggleInvisible = function () {

  }*/
});