Question

我正在尝试创建一个包含2个幻灯片的网站。我已经多次调整和重新调整了JS和Jquery。有时一个幻灯片放映完美，另一个放映在一张图片之间，其他时间都工作但不同步，或者fadeIn似乎没有应用于第二张幻灯片放映，或者在某些变化中，一张幻灯片放映在初始图像上保持冻结状态并保持静止。无论如何，我创建了一个JS Fiddle（底部链接），显然我的代码至少没有拼写错误。 JS在下面，其余的是JS Fiddle。任何帮助将不胜感激。

$(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小提琴它工作正常。我所做的是正确关闭所有<img>标签，因为html开始工作。从代码中删除document.ready并在jsfiddle的左侧面板中设置onload

在左侧面板中选择了jquery 1.8.3

使用jQuery创建并行幻灯片的问题

1 个答案: