渐变图像-调用.fadeIn和.fadeOut的位置

Fading images - Where to call .fadeIn and .fadeOut?

本文关键字：fadeOut 位置 fadeIn 图像 调用 渐变      更新时间：2023-09-26

我用这个打了一段时间的头。我是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旁边（可能是错误的），但什么都不起作用。有人能帮忙吗？我很感激能简单解释一下它的名字，这可以帮助很多人。谢谢

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

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

这样可以确保在淡出完成之前不会更改源。源更改，然后发生淡入。不过，这不会是交叉渐变。

相关文章：