Question

我正在尝试创建一个旋转木马，首先显示前7个图像，然后在内部显示前7个图像，然后淡出它们并显示下7个图像。

当显示所有图像时，它应该重新开始并且具有无限循环。

我该如何解决这个问题？

HTML：

<div class='flow'>
   <img src='assets/library/en/references/1.png' />
   <img src='assets/library/en/references/2.png' />
   <img src='assets/library/en/references/3.png' />
   <img src='assets/library/en/references/4.png' />
   <img src='assets/library/en/references/5.png' />
   <img src='assets/library/en/references/6.png' />
   <img src='assets/library/en/references/7.png' />
   <img src='assets/library/en/references/8.png' />
   <img src='assets/library/en/references/9.png' />
   <img src='assets/library/en/references/10.png' />
   <img src='assets/library/en/references/11.png' />
   <img src='assets/library/en/references/12.png' />
   <img src='assets/library/en/references/13.png' />
   <img src='assets/library/en/references/14.png' />
   <img src='assets/library/en/references/15.png' />
   <img src='assets/library/en/references/16.png' />
   <img src='assets/library/en/references/17.png' />
   <img src='assets/library/en/references/18.png' />
   <img src='assets/library/en/references/19.png' />
   <img src='assets/library/en/references/20.png' />
   <img src='assets/library/en/references/21.png' />
</div>

Jquery的：

x = 21;

setInterval(function() {

if(x>=21){

    x = 21;    
}

x = x - 7;
y = x + 7;

    setTimeout(function() {
        $('.flow > img:nth-child(1n+'+y+')').fadeOut().animate({
            opacity: 0
        }, 500);
    }, 3000);

    setTimeout(function() { 
        $('.flow > img:nth-child(1n+'+x+')').fadeIn().animate({
            opacity: 1
        }, 500);
    }, 3000);

}, 3000);

Answer 1

我认为这方面有很多方法，并且有很多用于图像轮播的jQuery插件（unheap.com是一个很好的jquery插件库，你可以在这里探讨）。我仍然是jQuery的新手，我不久前遇到了同样的问题。

使用.each（）函数而不是使用nth-child选择器进行操作，我感到很自在。

var len = $('.flow > img').length;
var by = 7;
var start = -1; //since first index is 0, I'll start lower than that
var curr = start;

setInterval(function(){
    if(curr >= len - 1){
        curr = start;
    }

    $('.flow > img').each(function(index, element) {
        if(index > curr && index <= curr + by){
            $(this).fadeIn(500);
        }else{
            $(this).hide();
        }
    });

    curr += by;

}, 3000);

请看我的小提琴：

JsFiddle

创建轮播，显示元素数量，隐藏并显示下一个元素数量

1 个答案: