jquery照片库下一个-上一个按钮绑定问题

发布于 2024-11-08 20:20:06 字数 358 浏览 5 评论 0原文

我正在使用这个照片库：

$('.normsize img:gt(0)').hide();
$('.photos a').click(function(){
    var index = $('.photos a').index(this);
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
});

在 div 中包含缩略图，旁边是正常尺寸的图片。

我的问题是：我如何绑定下一个和上一个按钮。它可能比我已经使用的更简单。

编辑：修复代码输出。

原文

I'm using this photo gallery with this:

$('.normsize img:gt(0)').hide();
$('.photos a').click(function(){
    var index = $('.photos a').index(this);
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
});

with thumbnails in a div and the normal size pics next to it.

My question is: How would I bind the next and previous buttons . Its probably simpler than what I m using already.

Edit: Fixed code output.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾｀听者〃 2024-11-15 20:20:06

您必须将当前图像索引存储在全局变量中。

var currentIndex = 0;
var lastIndex = $('.normsize img').size() - 1;

function showPic(index) {
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
    currentIndex = index;
}

$('.photos a').click(function() {
    showPic($('.photos a').index(this));
});

$('#next').click(function() {
    // If is the last go to first, else go to next
    showPic(currentIndex == lastIndex ? 0 : currentIndex + 1);
});

$('#prev').click(function() {
    // If is the first, go to last, else go to previous
    showPic(currentIndex == 0 ? lastIndex : currentIndex - 1);
});

$('.normsize img').hide(); // Hide all
showPic(0); // Initialize first picture shown

You have to store the current image index in a global variable.

var currentIndex = 0;
var lastIndex = $('.normsize img').size() - 1;

function showPic(index) {
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
    currentIndex = index;
}

$('.photos a').click(function() {
    showPic($('.photos a').index(this));
});

$('#next').click(function() {
    // If is the last go to first, else go to next
    showPic(currentIndex == lastIndex ? 0 : currentIndex + 1);
});

$('#prev').click(function() {
    // If is the first, go to last, else go to previous
    showPic(currentIndex == 0 ? lastIndex : currentIndex - 1);
});

$('.normsize img').hide(); // Hide all
showPic(0); // Initialize first picture shown

回复收藏 0 原文

~没有更多了~