单击更改滑块图像

Question

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

单击缩略图图像时，背景图像会褪色，但不会替换为新图像。 在上面我留下我的代码：

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

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