jquery - シンプルなjQueryフェードインフェードアウト画像

Question

画像がフェードアウトして別の画像に置き換わるスライドショーを作成するために使用できるスクリプトはありますか。以下のリストを使用して画像を一覧表示しています。私が見ているスクリプトは現在、画像を左右にスライドさせていますが、フェードアウトするものはありません。

<ul class="slideshow">
<li><img src="images/image1.gif" /></li>
<li><img src="images/image2.gif" /></li>
<li><img src="images/image3.gif" /></li>
<li><img src="images/image4.gif" /></li>
<li><img src="images/image5.gif" /></li>
<li><img src="images/image6.gif" /></li>
</ul>

Answer 1

これは私が手に入れることができた最も単純なもので、円形のギャラリーで、最後に達すると最初からやり直します。

ここにフィドルがあります：http：//jsfiddle.net/KA4Zq/

var count = 1;
setInterval(function() {
    count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
    $(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);

変更する必要があるのは2000の値（2秒）だけです。ギャラリーに画像を追加する場合、他の変数を設定する必要はありません。スクリプトはすべてを自分で行います...

そして、イベントを簡単にするために、私もあなたのhtmlを変更しました。必要はなく、中に画像が含まれているul listだけです。div

<div class="slideshow">
    <img src="" />
    <img src="" />
    ...
</div>

Answer 2

このようにulli内のすべての画像を選択し、$('ul li img')それを使用.fadeIn()して画像をフェードインさせます。

$('ul li img').fadeIn('slow');

それのスライドショーを作るためにあなたは使うことができますintervalそして:eq()

      var cnt = 0; 
setInterval(function(){
        cnt ==7 ? cnt=0:cnt++
        $('ul li img').fadeOut('');
        $('ul li img:eq('+cnt+')').fadeIn(1000)
    },1000);

Answer 3

$("ul > img").fadeOut().fadeIn()