用淡入淡出加载图像变化

Question

当我点击页面上的其他图像（箭头图像）时，我想更改具有淡入淡出效果的图像。

我有一个脚本，但在获取箭头图像时无法加载该功能。

html：

<img id="change_image" class="blockdisplay" src="Img/onetoone_1.jpg" height="80%">

<input id="change_image" type="image" src="Img/array_arrow_right.jpg" class="blockdisplay" height=12.5px width 12.5px >

和脚本：

var images = ("Img/onetoone_1.jpg","Img/onetoone_2.jpg","Img/onetoone_3.jpg","Img/onetoone_4.jpg","Img/onetoone_5.jpg","Img/onetoone_6.jpg");

$(document).ready(function(){
var image_number = 0;
// Click handler to change images
$("#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();
        });
    });
});

}）;