1

私は現在、単純なWebサイトで作業しており、ある画像から別の画像にフェードインする単純なスライドショーを設定しようとしています。私が現在設定している方法では、JQueryを使用してすべての画像をフォルダーからhtmlに（動的に）ロードします。

（phpを介して）画像名のリストを取得し、各画像のhtmlを追加するようにしています（画像は各画像の名前の配列にすぎません）：

for(var i = 0; i < images.length; i++) {
    $('#slideshow').append('<img id="\"slide' + i + '\"" src="animations/' + images[i] + '" style=\"display: none;\"/>');
}

次に、このメソッドを呼び出します。このメソッドは、それらを循環するために開始（および継続）する必要があります。動的にロードされた画像なしで動作しましたが、動的コンテンツで.cssまたは.fadeInを使用できないため、スタックしています。

function countDown() {
    setTimeout(countDown, 4000);
    lastSlideNum = count;
    count++;
    if(count > images.length)
        count = 0;
    currentSlideNum = count;

    //This next part never gets called  because it can't access the dynamically created img
    $("#slide" + lastSlideNum).fadeOut('slow', function() { 
        $(this).css("display", "none");
        $("#slide" + currentSlideNum).fadeIn('slow');
    });
}

私はそれがおそらく物事を行うためのきれいなまたは最も簡単な方法ではないことを理解していますが、これに関するアドバイスは大いに役立ちます。私はJQueryを初めて使用するので、これについてもっと簡単な方法がある場合はお知らせください。

TL; DR：動的にロードされたコンテンツをフェードインおよびフェードアウトするための回避策はありますか？

4

2 に答える 2

2

ここで私のデモを試してください：http：//jsfiddle.net/QAa7a/

アイデアは、$（ "＃slideshow img：nth-​​child（" + lastSlideNum + "）"）を使用してクエリを実行することです。

function countDown() {
    setTimeout(countDown, 4000);
    lastSlideNum = count + 1;
    count++;
    if(count >= images.length)
        count = 0;
    currentSlideNum = count + 1;

    //This next part never gets called  because it can't access the dynamically created img
    console.log(lastSlideNum + "?" + $("#slide" + lastSlideNum).length);
    $("#slideshow img:nth-child(" + lastSlideNum + ")").fadeOut('slow', function() { 
        $(this).css("display", "none");
        $("#slideshow img:nth-child(" + currentSlideNum + ")").fadeIn('slow');
    });
}

n番目の子セレクターに慣れていない場合は、次のリンクを確認してください：http: //api.jquery.com/nth-child-selector/

于 2013-01-30T01:50:38.173 に答える
0

すべてのインデックス番号などを使用して、jQueryの方法で処理を行っているわけではありません。ここで大幅に簡略化できます。jQueryを使用してDOMに動的に追加された要素にアクセスできない理由はありません。

for(var i = 0; i < images.length; i++) {
    $('#slideshow').append('<img class="rotating_image" src="animations/' + images[i] + '" style="display: none;"/>');
}

var slide_interval = 4000;
continue = true;
while (continue === true) {
    $('.rotating_image').each( function() {
        $(this).fadeIn('slow').delay(slide_interval).fadeOut('slow');
    });
}
于 2013-01-30T01:50:31.810 に答える