javascript - フェードで画像変更を読み込む

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

});