1

我正在尝试创建一个轮播，它首先显示前 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>

查询：

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);
4

1 回答 1

0

我认为这方面有很多方法，并且有很多用于图像轮播的 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);

请看我的小提琴：

提琴手

于 2013-10-30T01:20:54.117 回答