Question

我有一个简单的JQuery幻灯片（基本上是从http://snook.ca/archives/javascript/simplest-jquery-slideshow复制的）。

每张图片花费的总时间为6秒。其中转换到下一个图像（通过线性淡入淡出）所花费的时间是4秒，这意味着您看到每个图像没有任何渐变的时间是2秒。这很好。

然而，当页面最初加载时，第一张图像不会从任何内容中淡出，因此在转换到第二张图像之前它将在那里停留整整6秒。因为每个其他图像只有2秒钟，您看到它们没有动画渐变，所以看起来好像初始图像显示的时间比其他图像长得多。

我希望第一张图片只显示2秒钟，这样它在没有过渡效果的情况下显示的时间与其他图像相同。如何将第一张幻灯片上花费的时间仅为2秒，然后再将其更改为6秒？

脚本：

<script src="js-jquery-1.11.2.js"></script>
<script>
    $(function(){
        $('.frontSlide img:gt(0)').hide();
        setInterval(function(){
            $('.frontSlide :first-child').fadeOut(4000, 'linear')
            .next().fadeIn(4000, 'linear')
            .end().appendTo('.frontSlide');},
        6000);
    });
</script>

的CSS：

.frontSlide {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.frontSlide img {
    position:absolute;
    left:0;
    top:0;
}

体：

<div class="frontSlide">
    <img src="01.jpg" />
    <img src="02.jpg" />
    <img src="03.jpg" />
    <img src="04.jpg" />
</div>

Answer 1

您可以使用动画函数的回调来链接动画，而不是使用setInterval()。不幸的是，.delay()函数似乎不支持在完成时执行的回调 - 就像其他动画函数那样 - 但.queue()函数可用于此目的。您只需记住在回调函数中调用.dequeue()。

$(function() {
    function showNextSlide($slide) {
        var $nextSlide = $slide.next();
        if ($nextSlide.length == 0) {
            $nextSlide = $slide.siblings(':first');
        }
        $nextSlide.fadeIn(2000, 'linear').delay(2000).queue(function() {
            showNextSlide($(this).dequeue().fadeOut(2000, 'linear'));
        });
    }

    $('.frontSlide>:gt(0)').hide();

    $('.frontSlide>:first').delay(2000).queue(function() {
        showNextSlide($(this).dequeue().fadeOut(2000, 'linear'));
    });
 });

jsfiddle

上面的代码不会移动容器中的图像，但会产生更多的代码行。这是一个像原始代码一样移动图像的版本。

$(function() {
    $('.frontSlide>:gt(0)').hide();
    $('.frontSlide>:first').delay(2000).queue(function(next) {
        next();
        (function fadeSlide() {
            $('.frontSlide>:first').appendTo('.frontSlide').fadeOut(2000, 'linear');
            $('.frontSlide>:first').fadeIn(2000, 'linear').delay(2000).queue(function(next) {
                next();
                fadeSlide();
            });
        })();
    });
 });

jsfiddle

Answer 2

在间隔之前运行相同的代码并将其包裹在setTimeout 2秒内：

<script src="js-jquery-1.11.2.js"></script>
<script>
    $(function(){
        $('.frontSlide img:gt(0)').hide();
        setTimeout(function() {
            fade();
            setInterval(fade, 6000);
        }, 2000);
        function fade() {
            $('.frontSlide :first-child').fadeOut(4000, 'linear')
            .next().fadeIn(4000, 'linear')
            .end().appendTo('.frontSlide');
        }
    });
</script>

Jquery幻灯片 - 初始图像上的时间

2 个答案: