javascript - 如何向change_image函数添加淡入淡出效果

Question

我有一个图像数组，带有 JavaScript 中的更改图像函数。该函数由链接到 html 中 (href="javascript:change_image(1)) 链接的图像调用。

该脚本在 html 中加载时工作正常，但我想为其添加淡入淡出效果，以便每个图像淡出，新图像淡入。有人可以把我引向正确的方向吗？

我真的很感激..

脚本:

var Image = new Array("Img/1.jpg","Img/2.jpg","Img/3.jpg","Img/4.jpg","Img/5.jpg","Img/6.jpg");

var Image_Number = 0;
var Image_Length = Image.length - 1;

function change_image(num){ 

Image_Number = Image_Number + num;

if (Image_Number>Image_Length){

    Image_Number = 0;
}
if (Image_Number<0){

    Image_Number = Image_Length;
}


document.slideshow.src= Image[Image_Number];

return false;
}

Answer 1

这个怎么样？

HTML:

<img id="image" src="Img/1.jpg"><br>
<span id="change_image">Change image!</span>

JS:

var images = ["Img/1.jpg", "Img/2.jpg", "Img/3.jpg", "Img/4.jpg"];

$(document).ready(function(){
    var image_number = 0;
    // Click handler for "change image" link
    $("#change_image").click(function(){
        // Get number of next image (loop)
        image_number = (image_number + 1) % images.length;
        // Make sure the image is loaded (if not, preload it)
        $("<img>").attr("src", images[image_number]).load(function(){
            // As soon as the next image is loaded, fade out the current one...
            $("#image").fadeOut(function(){
                // ...and fade in the new image :)
                $(this).attr("src", images[image_number]).fadeIn();
            });
        });
    });
});

DEMO (JSFiddle)