0

当幻灯片中的两个按钮（右/左）到达各自的边界时，我需要帮助来禁用它们 -小提琴；将背景颜色和光标类型更改为默认值就足够了。这是 jQuery 代码：

var menuItem_place = 0;
var menuItem_position = 0;
var menuItem_limit = parseInt($('.menuItem').length) - 1;

$('.menuItem:first .content').css({margin: 0, height: '100%', lineHeight: '99px'})

$('#rightBtn').on('click', function(){
    if (menuItem_place < menuItem_limit) {
        menuItem_place++;
    }
    menu_animate();
});

$('#leftBtn').on('click', function(){
    if (menuItem_place > 0){
        menuItem_place--;
    }
    menu_animate();
});

var menuitems = $('.menuItem');
var contents = $('.content', menuitems);

menuitems.click(function(){
    menuItem_place = $(this).index();
    menu_animate()
});

function menu_animate() {
    contents.animate({margin: 20, height: '64%', lineHeight: '63px'}, 300);
    $(contents.get(menuItem_place)).stop().animate({margin: 0, height: '100%', lineHeight: '99px'}, 100)
    menuItem_position = 0 - (menuItem_place * 200);
    $('#menuContainer').stop().animate({left: menuItem_position + 'px'}, 300);
}

代码不是我的，超出了我的能力范围。任何帮助，将不胜感激。谢谢。

佩德罗

4

2 回答 2

1

只需检查menuItem_place它是否为零（第一个元素）或等于$('.menuItem').length - 1（最后一个元素）。我创建了一个.disabled基于这些条件应用或删除的类 ( )。

jsFiddle 示例

var menuItem_place = 0;
var menuItem_position = 0;
var menuItem_limit = parseInt($('.menuItem').length) - 1;
if (menuItem_place == 0) $('#leftBtn').addClass('disabled'); // <-- NEW
$('.menuItem:first .content').css({
    margin: 0,
    height: '100%',
    lineHeight: '99px'
})

$('#rightBtn').on('click', function () {
    if (menuItem_place < menuItem_limit) {
        menuItem_place++;
    }
    menu_animate();
});

$('#leftBtn').on('click', function () {
    if (menuItem_place > 0) {
        menuItem_place--;
    }
    menu_animate();
});

var menuitems = $('.menuItem');
var contents = $('.content', menuitems);

menuitems.click(function () {
    menuItem_place = $(this).index();
    menu_animate()
});

function menu_animate() {
    contents.animate({
        margin: 20,
        height: '64%',
        lineHeight: '63px'
    }, 300);
    $(contents.get(menuItem_place)).stop().animate({
        margin: 0,
        height: '100%',
        lineHeight: '99px'
    }, 100)
    menuItem_position = 0 - (menuItem_place * 200);
    $('#menuContainer').stop().animate({
        left: menuItem_position + 'px'
    }, 300);
    $('#rightBtn,#leftBtn').removeClass('disabled'); // <-- NEW
    if ($('.menuItem').length - 1 == menuItem_place) $('#rightBtn').addClass('disabled'); // <-- NEW
    if (menuItem_place == 0) $('#leftBtn').addClass('disabled');  // <-- NEW
}
于 2013-04-11T15:22:19.327 回答
0

我不确定您所说的禁用 2 个按钮是什么意思，但我只能假设您的意思是左右按钮。

我已经更新了您的 jsfiddle 代码，请参见下文。

http://jsfiddle.net/xkUYm/1/

我所做的只是display:none在 css中告诉他们

或者

您可以将它们一起从 HTML 中删除。

于 2013-04-11T15:14:56.983 回答