在使用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