褪色图像滑块

我试图淡入淡出图像。我不确定是否事先预先加载图像更好。相当多发生的事情是，淡入淡出的下一个图像中褪色前打全白背景，但我希望它消失立刻而不是显示白色背景 - 如果是有道理的：褪色图像滑块

$(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

我的解决方案（这是厌倦sinced我开始的问题...）

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

来源

2013-08-02 Derp

我很乐意帮忙，你有jsfiddle吗？ – Seano666

它没有我猜想的图像，但它的要点在那里... http://jsfiddle.net/De63Q/ – Derp

预加载（除非你有*微小*图像）更好，因为那么第一个图像可以在剩余下载时显示，并且在使用时，该请求只需要验证304状态（未修改），这比下载快得多。它会减缓第一次运行时的淡入淡出/幻灯片播放速度，但可能意味着每张图片可以节省几秒钟。为了避免空白，你可能希望在他们的部分运行时中重叠'fadeOut（）'和'fadeIn（）'。 – Trojan

如果有限的影像数量，最好是在加载所有的人页面加载。

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

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

而不是一个单一的img标签，添加三个img标签（从您的代码，有三个图像）。
同时启动动画fadeOut和fadeIn。
fadeOut当前图像和fadeIn为下一张图像。

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

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

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

来源

2013-08-02 03:25:28

那么这个阵列最终会变成动态的，所以我不得不用3个图像替换3个图像。 – Derp

请勿更换任何图像。在页面加载时自己添加三张图片。但风格他们显示所有三个图像一对一（给一些位置）。然后你只需要淡入淡出，淡入淡出。无需更改任何图像的'src'属性。 –

这是否解决您的问题？让我知道。 –

褪色图像滑块

回答

相关问题