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>

Jクエリ:

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を使い始めたばかりで、少し前に同じ問題を抱えています。

nth-child セレクターで操作するよりも、.each() 関数でこれを行う方が快適だと思います。

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

私のフィドルを見てください：

Jsフィドル

于 2013-10-30T01:20:54.117 に答える