1

我正在尝试使图像淡入淡出。我不确定是否最好预先加载图像。几乎正在发生的事情是，在下一张图像中淡出之前，淡入淡出完全是白色背景，但我希望它立即淡出而不是显示白色背景 - 如果这是有道理的：

$(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);
    }
});
4

1 回答 1

1

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

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

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

  1. 添加三个 img 标签而不是单个 img 标签（从您的代码中，有三个图像）。
  2. 一次启动fadeOut和fadeIn动画。
  3. fadeOut对于当前图像和fadeIn下一个图像。

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

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

看看这个：http ://db.tt/q8VPb03U

于 2013-08-02T03:25:28.253 回答