单击中更改滑块图像

Question

在我的页面中我有一个图像列表和背景图像，基本上我试图做的是当点击其中一个缩略图图像时，背景图像会发生变化。但是我无法弄清楚为什么它不会改变图像。

单击缩略图图像时，背景图像会变淡，但它不会替换新图像。上面我留下我的代码：

thumb-img id缩略图ID  和#banner是背景图像的包装器。

示例：http://jsfiddle.net/q6h50ejq/6/

$('#thumb-img').click(function(){
                $this = $(this);
                $image = $this.attr('full');
                $("#banner").hide().html('<img class="item_image"  src="img/newImage.jpg">').fadeIn(300);  

                });

           });

Answer 1

以下是已完成的结果，并附有评论说明。

JSFiddle

诀窍不是替换html，而是替换src。

//use a class rather than an ID to bind the click event
$('.thumb-img').click(function () {
    //gets the source of the thumbnail
    var source = $(this).attr('src');
    $("#banner").fadeOut(function () {
        //fades banner out and upon completion changes source image and fades in.
        $(this).attr("src", source);
        $(this).fadeIn();
    });
});