Question

我正在创建一个报纸网站并以缩略图显示每个页面。点击缩略图后，它会显示主区域中的相应图像。现在我想放下next / prev按钮。我怎么能这样做。

// 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");

DEMO： http://jsfiddle.net/Bgj4b/

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

1 个答案: