javascript - 使用 Javascript 从图像到图像(不是图像到白色到图像)淡入淡出

Question

我有一个“幻灯片放映”类型的功能，其中图像彼此淡入淡出。它工作正常，但是当它淡入淡出时，它会将第一张图片淡出为白色，然后第二张图片淡入。我想要的是让第一张图片淡入第二张图片(中间没有空白的白色背景)。我可以这样做吗？

这是一个示例:http://jsfiddle.net/aegtjm5y/5/

图像

<img id="image1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" style="width: 100%;">

JS

var curIndex = 0;
var src = ['/images/IMG_20140907_203614.jpg', 'http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg', 'http://cvcl.mit.edu/hybrid/cat2.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 1000;

$(document).ready(function(){
    switchImageAndWait(true);
});

function switchImageAndWait(fadeOut2){
    if(fadeOut2){
        setTimeout(fadeOut, waitTimeInMilliseconds);
    }else{
        var index = Math.floor((Math.random()*src.length))
        if(curIndex == index){
            index++;
            if(index >= src.length){
                index-=2;
            }
        }
        curIndex = index;
        $("#image1").attr("src", src[index]);
        fadeIn();
    }
}

function fadeOut(){
    $("#image1").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}

function fadeIn(){
    $("#image1").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}

Answer 1

编辑:“我可以这样做吗？” - 不。您不能仅使用一个图像元素来执行此操作。

您基本上需要的是两张图像，一张放在另一张上面。

我编辑了你的 fiddle ，它工作正常: JSFiddle

所以基本上我添加了另一个 img 元素并将图像的位置设置为绝对(因此它们重叠)。

<img id="image2" src="http://cvcl.mit.edu/hybrid/cat2.jpg" style="width: 100%;position: absolute;">

我更新了 javascript 内容，以便图像在淡入和淡出“事件”中发生变化。原理是上面的图像淡出和淡入。当它不可见时，您可以更改它的 src 。当它可见时，您可以更改底部图像的 src。

我现在想不出更好的解决方案。希望这有帮助..