我正在创建一个报纸网站并以缩略图显示每个页面。点击缩略图后,它会显示主区域中的相应图像。现在我想放下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);
});
答案 0 :(得分:2)
在添加下一个和上一个功能之前,您的应用程序需要知道哪个拇指当前处于活动状态。假设我已经正确地解释了你的问题,以下应该可以解决这个问题:
// 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");