2011-06-25 9 views
0

http://jsfiddle.net/nicktheandroid/B7Rhe/5/のjQuery:小さなスライドショー、のsetInterval

私は現在のスライドオーバーで次のスライドにフェードを作成しようとしていると次のスライドは、トップの上にフェードインするためにvar、および問題を作成する方法を、代わりに私はそれを把握することはできません。

また、私がコメントアウトしたことに注目してください。私はこれを関数にしようとしましたが、関数上でsetIntervalを呼び出そうとしましたが、機能していませんでした。setintervalの中で関数を呼び出すのではなく、関数自体の周りにsetIntervalを置きます。

ご迷惑をおかけして申し訳ございません。

var x = 2; 
console.log('Not broken'); 

setInterval(function() { 
// function slideshow() { 
    var m = $('.slideshow li').size(); 
    x += 1; 
    if (x > m) { 
     x = 1; 
    } 
    $(".slideshow ul li:nth-child(" + (x) + ")").animate({ 
     opacity: 1 
    }); 
    $(".slideshow ul li:nth-child(n)").animate({ 
     opacity: 0 
    }); 
    $(".slideshow ul li:nth-child(" + (x) + ")").animate({ 
     opacity: 1 
    }); 
// } 
}, 2000); 

//setInterval("slideshow()", 1000); 

答えて

1

あなたの問題は、このです:

$(".slideshow ul li:nth-child(n)") 

:nth-child(n)はちょうどすべてが、n個を渡すと、そのセレクタを全く含まないと同じであると一致します。だから問題は、すべての要素をフェードアウトしてから、フェードアウトして戻ってしまうことです。目に見えるものだけをフェードアウトする必要があります。これに変更してください:

$(".slideshow ul li:visible") 

その他のマイナーチェンジ。最初の読み込みでは、すべての画像が表示されているので、それらはすべて非表示になります。最初のサイクルで動作するように、表示されているもの以外のすべてを非表示にする必要があります。