Question

首先，我刚刚开始使用HTML，CSS和JS，我现在正在教自己！（所以我是新手！）

现在，我使用jQuery制作了一个全屏图像推子，我遇到了两个小问题。

1）推子显示（img 1）然后它再次淡化为（img 1）然后逐渐淡化为（img 2）（IMG 3）（img 4）并返回（img 1）。但我正在寻找一个简单的（img 1）＆gt; （img 2）＆gt; （img 3）＆gt; （img 4）＆gt; （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的背景颜色更改为黑色或中灰色或类似的东西。如果你想完全摆脱它，你需要转向另一种策略，你有第二个图像覆盖在第一个图像上，新图像被淡入，然后底部图像可以被删除另一个新的可以在第二个之上。你总是从一个图像淡化到另一个图像，而不是一个图像，一无所有，然后回来。

（图像推子）淡出色彩＆amp; 1次重复淡出

1 个答案:

修改