所以我试图让旋转木马中的每个项目在每次迭代后再次消失。循环不断重复,但项目不会消失。这是codepen代码。
任何帮助将不胜感激。感谢..
$(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();
});

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

<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;
答案 0 :(得分:2)
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 () {
}*/
});