Question

我在javascript中有一个带有更改图像功能的图像数组。该函数由链接到链接的图像调出（html =“javascript：change_image（1）in html。

该脚本在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)

如何为change_image函数添加淡入淡出效果

1 个答案: