在使用jQuery創建並排幻燈片時出現問題

Question

我正在嘗試創建一個包含2個幻燈片的網站。 我已經多次調整並重新調整了JS和Jquery。 有時一個幻燈片播放效果很好，而另一個在一張圖片之間循環，其他時候都可以，但是不同步，或者fadeIn似乎沒有應用到第二張幻燈片上，或者在某些變化中，一個幻燈片保持凍結在初始圖像上並保持不變。 無論如何，我創建了一個JS Fiddle（底部的鏈接），顯然我的代碼至少沒有錯別字。 JS在下面，其余部分在JS小提琴上。 任何幫助將不勝感激。

$(document).ready(function () {

    $(".slider #1").fadeIn(1000);
    $(".slider #1").delay(2000).fadeOut(1000);


    var sc = $(".slider img").size();
    var count = 2;

    setInterval(function () {
        $(".slider #" + count).fadeIn(1000);
        $(".slider #" + count).delay(2000).fadeOut(1000);

        if (count === sc) {
            count = 1;
        } else {
            count++;
        }
    }, 3500);


    $(".sliderTwo #7").fadeIn(1000);
    $(".sliderTwo #7").delay(2000).fadeOut(1000);


    var sc2 = 12;
    var count2 = 7;

    setInterval(function () {
        $(".sliderTwo #" + count2).fadeIn(1000);
        $(".sliderTwo #" + count2).delay(2000).fadeOut(1000);

        if (count2 === sc2) {
            count2 = 7;
        } else {
            count2++;
        }
    }, 3500);
});

http://jsfiddle.net/gg4PL/

Answer 1

第一：-切勿將id寫入數字。 嘗試$(window).load因為document.ready總是在基本html生成后就可以正常工作，但是，當將所有資源加載到html中（如圖像等）時，window.load都可以工作。我在js上看到它工作正常。 由於html開始工作，我已經正確關閉了所有<img>標記。 從代碼中刪除document.ready並在jsfiddle的左側面板中設置onload

在左側面板中選擇了jquery 1.8.3