Question

我被要求创建一个缩略图库，可在点击时更改主图像。

我在网上找到了这个

jsfiddle.net/jfriend00/frXyP /

但是我想在缩略图中添加一个选定状态，以便用户知道他们正在查看哪个缩略图（缩略图和主图像不一样），当他们点击另一个缩略图时，所选状态从上一个缩略图到新的缩略图。

事先感谢所有人的帮助。

干杯

卡梅伦

Answer 1

在CSS文件中创建一个类，并在点击缩略图时切换它。就像这样：

// precache all images so they will load on demand
var imgs = [];
$('a.thumb').each(function() {
    var img = new Image();
    img.src = this.href;
    imgs.push(img);
}).click(function () {
    $('a.thumb').removeClass("thumb-active"); // removing the class of all objects
    $(this).addClass("thumb-active"); // Adding the for the active object
    var oldImg = $("#fadeContainer img");

    var img = new Image();
    img.src = this.href;
    var newImg = $(img).hide();
    $("#fadeContainer").append(img);
    oldImg.stop(true).fadeOut(500, function() {
        $(this).remove();
    });
    newImg.fadeIn(500);
   return false;

}）;

在CSS文件中，编辑样式：

.thumb-active{  }

将选定状态添加到缩略图库

1 个答案: