1

我在 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;
}
4

1 回答 1

0

这个怎么样？

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

演示（JSFiddle）

于 2013-08-20T21:34:11.547 回答