使用列表的jquery图片库
使用列表的jquery图片库
提问于 2013-02-20 18:52:43
我用html列表做了一个jquery图片库。“上一步”和“下一步”按钮有问题。当你在加载后立即打开一张照片，它们就能正常工作。如果我关闭图库，转到另一张照片，然后单击它打开我的下一个和前一个变量，它们会跳过照片。我尝试做的是使用变量和jquery、.next和.previous作为箭头。
非常感谢你在这方面的帮助。
我在这里有一个演示，http://jsbin.com/uvikug/11/edit
打开一张照片、下一个和上一个按钮的代码是这样的，但你可以在这个链接上看到所有的内容：
$(".photo").click(function() {
$("#loading_box_container").animate({
height: "100%"
}, 300, function() {
$("#close").css({
display: "block"
});
});
id = $(this).attr('id');
$('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');
fadeIn('#' + id);
$("#next").click(function() {
if (!$('#' + id).hasClass("last")) {
$("#preload").fadeOut(500, function() {
var id_a = $('#' + id).next().attr('id');
id = id_a;
$('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id_a + '.jpg');
fadeIn('#' + id_a);
});
}
});
$("#prev").click(function() {
if (!$('#' + id).hasClass("first")) {
$("#preload").fadeOut(500, function() {
var id_b = $('#' + id).prev().attr('id');
id = id_b;
$('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');
fadeIn('#' + id);
});
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-20 19:15:37
基本上，您的代码一点也不差，只有一个小问题，那就是每次有人单击<li class="photo" />时都会附加事件处理程序。
只要把积木
$("#prev").click(function() {..和"$("#next").click(function() { ..."以及块"$(".photo").click(function() { ... })"之外的每一个这样的代码。
而且它会工作得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14987719
复制相关文章
相似问题
腾讯云开发者
