显示带有缩略图和下一个/上一个按钮的图像

Display images with thumbnail and next/prev buttons

本文关键字：上一个 按钮 图像 下一个 略图 显示      更新时间：2023-09-26

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

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

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

// 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/

相关文章：