Question

我已经构建了一个自定义jQuery滑块（我知道Cycle等但是想要使用自定义滑块）。

它允许用户使用寻呼机以及我设法开始工作的下一个和上一个按钮来导航滑块。

但是因为我的滑块没有循环（有意设计）我想隐藏并显示当用户到达第一张或最后一张幻灯片时的下一个和上一个按钮。

为此，我创建了一个函数，当用户单击按钮或寻呼机并检查要显示或隐藏的内容时，该函数会运行。但这就是我被困住的地方。有人可以帮忙吗？

我到目前为止最接近的工作是：

if ($('div.slideshow > div:last').is(':visible')) {
                        $('.next').fadeOut();
                    } else {
                        $('.next').fadeIn();
                    } if ($('div.slideshow > div:first').is(':visible')) {
                        $('.previous').fadeOut();
                    } else {
                        $('.previous').fadeIn();
                    }

但它在中间页面时没有显示正确的按钮，有时会混淆并隐藏并显示错误的按钮。

还尝试添加此项以修复中间页问题，但又会导致问题：

if ($('div.slideshow > div:visible').prev(':hidden')) {
                        $('.previous').fadeIn();
                    }
                    if ($('div.slideshow > div:visible').next(':hidden')) {
                        $('.next').fadeIn();
                    }

Answer 1

添加到下一个按钮

if($('.slideshow div:last-child') === $('.slideshow div:visible')){
    $('.next').hide();
}

添加到上一页

if($('.slideshow div:first-child') === $('.slideshow div:visible')){
    $('.previous').hide();
}

Answer 2

这确实有效：

if ($('div.slideshow > div:first-child').is(':visible')) {
                    $('.previous').hide();
                }
                else {
                    if ($('div.slideshow > div:visible').prev(':hidden')) {
                        $('.previous').show();
                    } else {
                        $('.previous').hide();
                    }
                }


                if ($('div.slideshow > div:last-child').is(':visible')) {
                    $('.next').hide();
                } else {
                    if ($('div.slideshow > div:visible').next(':hidden')) {
                        $('.next').show();
                    } else {
                        $('.next').hide();
                    }
                }

jQuery自定义滑块显示或隐藏导航按钮

2 个答案: