javascript - 使用缩略图和下一个/上一个按钮显示图像

Question

我正在创建一个报纸网站并以缩略图形式显示每一页。单击缩略图后，它会在主区域中显示相应的图像。现在我也想放置下一个/上一个按钮。我怎样才能做到这一点。

// change image on click of thumbnails
$(".thumb").click(function() {
    //$("#mainimage").attr("src", $(this).attr("alt"));
    var href = $(this).attr("alt");
    $('#mainimage').parent().attr('href', href);
    $("#mainimage").fadeOut(function() {
        $(this).load(function() { $(this).fadeIn(); });
        $(this).attr("src", href);
    });

Answer 1

您的应用程序需要知道哪个拇指当前处于活动状态，然后才能添加下一个和上一个功能。假设我已经正确解释了您的问题，以下应该可以解决问题：

// change image on click of thumbnails
$(".thumb").click(function() {
    var href = $(this).attr("alt");
    $('#mainimage').parent().attr('href', href);
    $("#mainimage").fadeOut(function() {
        $(this).load(function() { $(this).fadeIn(); });
        $(this).attr("src", href);
    });
    //record which thumb was clicked
    $(".thumb").removeClass("active");//remove class
    $(this).addClass("active");//apply class to selected thumb
});

//move next
$(".next").click(function(){
    if($(".thumb.active").next(".thumb").length>0){
        $(".thumb.active").next().trigger("click");
    } else {
        $(".thumb:first").trigger("click");//go to first
    }
    return false;
});

//move previous 
$(".prev").click(function(){
    if($(".thumb.active").prev(".thumb").length>0){
        $(".thumb.active").prev().trigger("click");
    } else {
        $(".thumb:last").trigger("click");//go to end
    }
    return false;
});

//click the first thumb to begin
$(".thumb:first").trigger("click");

演示：http: //jsfiddle.net/Bgj4b/