0

我通过重复jQuery效果创建了一个非常基本的幻灯片setInterval。但是，每个周期后的时序不匹配setInterval。几个周期后，它会导致两个平行幻灯片效果出现明显的不匹配。

代码是

$(document).ready(function(){
var frontslides =$("#first li").length,
    slideTime=500,
    slideCycle=parseInt(slideTime*frontslides);

function frontSlide(){
    $("#first li").each(function(n){
        $(this).delay(slideTime*n).fadeIn(400).fadeOut(100);
        $("#second li").eq(n).delay(slideTime*n).fadeIn(400).fadeOut(100);
    });}
frontSlide();setInterval(frontSlide, slideCycle);});​

工作示例在这里

为了节省您宝贵的时间，它的速度很快，但它发生在任何速度。几个循环后，您可以看到左右幻灯片不再同步。

4

3 回答 3

4

第一种方法：setTimeout

您可以在单独的函数中将过渡移动到下一张幻灯片并使用setTimeout. 然后，您只需将幻灯片编号存储在一个变量中，并在每次函数调用后递增它。

$(document).ready(function(){
    var firstSlides = $("#first li"),
        secondSlides = $("#second li"),
        nbSlides = firstSlides.length,
        slideTime = 500,
        nextSlide = 0;

    function slideshow() {
        firstSlides.eq(nextSlide).fadeIn(400).fadeOut(100);
        secondSlides.eq(nextSlide).fadeIn(400).fadeOut(100);

        nextSlide = (nextSlide+1) % nbSlides;
        setTimeout(slideshow, slideTime);
    }

    slideshow();
});

这是第一种方法的小提琴。

第二种方法：承诺

如果你想在开始下一个动画时绝对保证两个动画都完成，你可以使用 jQuery 1.6 中的新 Promise。您可以调用$.promise()两个 jQuery 对象来获得一个承诺，该承诺将在该元素的所有动画完成后得到解决。然后，您可以设置一个主 Promise，$.when(promises...)当所有给定的 Promise 都被解决并设置一个then处理程序时，该主 Promise 将被解决。

$(document).ready(function(){
    var firstSlides = $("#first li"),
        secondSlides = $("#second li"),
        nbSlides = firstSlides.length,
        fadeInTime = 400,
        fadeOutTime = 100,
        nextSlide = 0;

    function slideIn() {
        var p1 = firstSlides.eq(nextSlide).fadeIn(400).promise();
        var p2 = secondSlides.eq(nextSlide).fadeIn(400).promise();

        $.when(p1, p2).then(slideOut);
    }

    function slideOut() {
        var p1 = firstSlides.eq(nextSlide).fadeOut(100).promise();
        var p2 = secondSlides.eq(nextSlide).fadeOut(100).promise();

        nextSlide = (nextSlide+1) % nbSlides;

        $.when(p1, p2).then(slideIn);
    }

    slideIn();
});

对于一个简单的幻灯片，您可能不会注意到太大的不同。然而，有了 Promise，你可以制作更高级的过渡序列，同时保持同步。

这是这种方法的一个小提琴。

于 2012-06-15T16:20:09.313 回答
2

将动画设置为“同时”运行：

function frontSlide(){
    $("#first li").each(function(n){
        var _ = $(this);
        setTimeout(function() {
            _.fadeIn(400).fadeOut(100);
            $("#second li").eq(n).fadeIn(400).fadeOut(100);
        }, slideTime*n);
    });
}
于 2012-06-15T16:12:38.607 回答
1

自从我张开嘴，这是我想出的版本。我blocked在其中添加了一个标志以指示当前正在运行效果循环，希望能防止脚本自身超限。我还添加了一个factor值，这样如果确实发生了溢出，它会更快地循环，以保持循环没有中断的外观。

如果您对此有任何其他问题，请告诉我。这很简单。

$(document).ready(function() {
    var $sel = $('#left, #right').find('li:first-child'),
        slidetime = 200,
        timein = 400,
        timeout = 100,
        blocked = false;

    var fadeout = function() {
        $sel.fadeOut(timeout, next);
    };

    var next = function() {
        if ($sel.is(':last-child')) {
            $sel = $sel.siblings(':first-child');
        } else {
            $sel = $sel.next();
        }

        blocked = false;
    };

    (function slider() {
        var factor = .2;

        if (!blocked) {
            factor = 1;
            blocked = true;

            $sel.fadeIn(timein, fadeout);
        }

        setTimeout(slider, slidetime * factor);
    })();
});​

http://jsfiddle.net/j63vH/

于 2012-06-15T19:26:21.240 回答