Question

我正试图将图像淡入淡出。我不确定是否最好先预先加载图像。几乎所发生的事情是，在下一张图像消失之前，淡入淡出会完全打到白色背景，但是我希望它能够立即消失，而不是显示白色背景 - 如果这有意义的话：

$(document).ready(function () {
    var $next, 
        cycle;
    var i = 0;
    var imgArr = ['1.jpg', '2.jpg', '3.jpg'];

    $activeLi = $("#slideshow li");
    $activeLi.html('<img src="images/' + imgArr[i] + '" />');
    cycle = setInterval(change_img, 1000);

    function change_img(){
        clearInterval(cycle);
        $activeLi.find('img').fadeOut('slow', function(){
            $activeLi.html('<img src="images/' + imgArr[i] + '" />').fadeIn('slow');
        });

        i = (i == (imgArr.length - 1)) ? 0 : ++i;
        cycle = setInterval(change_img, 1000);
    }
});

在淡入它们之前预先拍摄我的图像也更好吗？

JSFiddle

我的解决方案（这是一种厌倦了我开始提问的问题......）

$(document).ready(function () {
    var $next, 
        cycle;
    var i = 0;
    var durTimer = 2000;
    var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];

    $activeLi = $("#slideshow li");
    $activeLi.first().html('<img src="images/' + imgArr[0] + '" />');
    cycle = setInterval(change_img, durTimer);

    function change_img(){
        clearInterval(cycle);
        var nxtImg = (i == imgArr.length) ? 1 : i;
        $activeLi.last().html('<img src="images/' + imgArr[nxtImg] + '" />');
        $activeLi.find('img').animate({opacity:0}, {duration: durTimer});   

        i = (i == (imgArr.length - 1)) ? 0 : ++i;
        $activeLi.first().html('<img src="images/' + imgArr[i] + '" />');
        cycle = setInterval(change_img, durTimer);
    }
});

Answer 1

如果您的图像数量有限，最好在页面加载时加载所有图像。

在给定的示例中，您只使用一个img标记，并在一段时间后将其来源更改为另一个图像。

因此，当图像淡出时，我们肯定能看到白色背景。此外，加载新图像需要一些时间。

添加三个img标记，而不是单个img标记（从您的代码中，有三个图像）。
一次启动fadeOut和fadeIn动画。
fadeOut表示当前图片，<{1}}表示下一张图片。

这不会显示任何白色背景。

我已经为此创建了一个小型演示。

检查出来：http://db.tt/q8VPb03U

褪色图像滑块

1 个答案: