javascript - (图像渐变器)淡化颜色和 1 次重复淡化

Question

首先，我刚刚开始学习 HTML、CSS 和 JS，目前正在自学!(所以我是新手!)

现在，我使用 jQuery 制作了一个全屏图像渐变器，但遇到了 2 个小问题。

1) 推子显示 (img 1) 然后淡化为 (img 1) 再次 然后淡化为 (img 2) (图片 3) (img 4) 并返回 (img 1)。 但我正在寻找一个简单的 (img 1) > (img 2) > (img 3) > (img 4) > (img 1) 旋转。

2) 当 (img 1) 淡入 (img 2) 时，会出现一个短暂但非常明亮的白色闪光，我希望将其更改为更微妙的黑色闪光，甚至将其更改为下一个(img) 马上!

感谢阅读我希望你能理解我我无法解释得更清楚，因为我还没有真正的经验。

这是我使用的代码!

    $(document).ready(function functionName() {

    var count = 0;
    var images = ["slider1","slider2","slider3","slider4"];
    var image = $(".fader");

    image.css("background-image","url("+images[count]+")");

    setInterval(function(){
    image.fadeOut(500, function(){
    image.css("background-image","url("+images[count++]+")");
    image.fadeIn(500);
    });
    if(count == images.length)
    {
    count = 0;
    }

    },10000);

    });

Answer 1

第一个问题是您实际上加载了第一张图片两次。您将 count 设置为 0 并设置背景图像。然后在你的循环中，发生的第一件事是它再次将背景图像设置为图像 0，然后将 count 递增到 1(您正在使用后增量运算符)。如果要先自增，请使用预自增运算符 (++count)。但是您需要小心，因为这会改变您的检查以查看何时 count 超出图像数组长度。

我不能 100% 确定是什么导致了闪光，但我的猜测是因为您使用的是相同的元素并且只是设置了背景图像，所以当您用第二张图像替换第一张图像时一秒钟用于下载，因此您可以看到那段时间的背景。一旦你浏览完所有图像，它们就会在内存中，所以你不会再看到闪光灯。解决方法是预加载所有图像或加载元素中的下一张图像并将其放置在旧图像之上，然后淡入。

这些问题是可以修复的，但您可能还想从众多图片幻灯片插件中挑选一款。许多人使用 jQuery，但不是全部，您可以对它们进行相当多的自定义。它可能会为您省去一些麻烦。

编辑

让我们简化一下，因为您已经掌握了基础知识。这是一些更新的代码:

$(document).ready(function functionName () {
    var count = 0;
    var images = ["slider1","slider2","slider3","slider4"];
    var image = $(".fader");

    image.css("background-image","url("+images[count]+")");
    var count = 1;

    setInterval(function () {
        image.fadeOut(500, function () {
            image.css("background-image","url("+images[count++]+")");
            image.fadeIn(500);
        });
        if (count == images.length) {
            count = 0;
        }
    }, 10000);
});

我所做的唯一更改是在设置第一张图像后将 count 设置为 1；这样，当间隔开始时，它将以 1 开始，但在结束时将循环回到 0。

至于你对白色闪光的评论，是的，很可能是背景是白色的，你要下降到 0 并再次备份。如果你想要更少的闪光灯，你可以将 div 的背景颜色更改为黑色或中灰色或类似的颜色。如果你想完全摆脱它，你需要转向不同的策略，你有第二个图像覆盖在第一个图像上，新图像淡入，然后可以删除底部图像并另一个新的可以在第二个之上。你总是从一幅图像淡入另一幅图像，而不是从一幅图像消失然后再回来。