javascript - jquery cycle 将隐藏功能更改为禁用

Question

我正在使用 jquery cycle 作为轮播。我想为导航按钮添加一些额外的功能，以便在幻灯片放映开始时禁用上一个按钮，在幻灯片放映结束时禁用下一个按钮。

这里可以看到部分解决方案:http://jquery.malsup.com/cycle/after.html ，但我不想隐藏(显示:无)按钮 - 我想给它一个 class="disabled"。

我在调整此脚本时遇到问题:

    <script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        next:   '#mycarousel-next', 
        prev:   '#mycarousel-prev',
        after:   onAfter,
        pause: true,
        nowrap: true,
    });
});
function onAfter(curr, next, opts) {
    var index = opts.currSlide;
    $('#mycarousel-prev')[index == 0 ? 'hide' : 'show']();
    $('#mycarousel-next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}
</script>

我想我需要带 $('#mycarousel-next').attr('disabled', '');进入上面的语句，但我的 javascript 很差:(

非常感谢您的帮助

托尼

Answer 1

非常简单。如果您在第一张或最后一张幻灯片上，请添加 disabled 类。始终首先从两者中删除 disabled 类，否则在到达任一端后您将始终保持禁用状态。这假设您已为 disabled 定义了 css。

function onAfter(curr, next, opts) {
    var index = opts.currSlide;

    $('#mycarousel-prev, #mycarousel-next').removeClass('disabled');

    if(index == 0) {
        $('#mycarousel-prev').addClass('disabled');
    } else if(index == (opt.slideCount-1)) {
        $('#mycarousel-next').addClass('disabled');
    }
}

如果您使用的是您实际想要禁用的按钮，则需要将代码更改为:

function onAfter(curr, next, opts) {
    var index = opts.currSlide;

    $('#mycarousel-prev, #mycarousel-next').attr('disabled', '');

    if(index == 0) {
        $('#mycarousel-prev').attr('disabled','disabled');
    } else if(index == (opt.slideCount-1)) {
        $('#mycarousel-next').attr('disabled','disabled');
    }
}