Question

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

这里可以看到部分解决方案：http://jquery.malsup.com/cycle/after.html，但我不想隐藏（显示：无）按钮 - 我想给它一个类=＆＃34;禁用＆＃34;。< / p>

我无法修改此脚本：

    <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>

我想我需要携带$（＆＃39;＃mycarousel-next＆＃39;）。attr（＆＃39; disabled＆＃39;，＆＃39;＆＃39;）;进入上述陈述，但我的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');
    }
}

Jquery循环更改隐藏功能到禁用

1 个答案: