Question

用这个打了一会儿。我是JavaScript和jQuery的新手。经过大量的反复试验后，我最终设法编写了一个函数来更改图像的src属性，从而创建幻灯片：

    $(function () {
            var slideshow = $("#img_slideshow");
            var images = [
            'img/slideshow1.jpg', 
            'img/slideshow2.jpg',
            'img/slideshow3.jpg'];
            var current = 0;

            function nextSlide() {
                slideshow.attr(
                'src',
                images[current = ++current % images.length]);

                setTimeout(nextSlide, 5000);
            }
            setTimeout(nextSlide, 5000);
        });

这非常有效，每5秒更换一次图像。我想要的是他们之间的渐变过渡。我尝试在几个地方调用.fadeIn和.fadeOut我找到逻辑，比如在setTimeout旁边（可能是错误的），但什么都行不通。有人可以帮忙吗？我很感激有一个简单的解释，它应该被称为什么，可以帮助很多人。感谢。

Answer 1

应该这样做（使用回调） -

function nextSlide() {
    slideshow.fadeOut(function() {
        $(this).attr('src',images[current = ++current % images.length]).fadeIn();
    });

    setTimeout(nextSlide, 5000);
}

这确保在淡出完成之前不会更改源。然后发生源变化和淡入淡出。但这不会是一种交叉淡入淡出。

褪色图像 - 在哪里调用.fadeIn和.fadeOut？

1 个答案: