Question

我需要帮助，当幻灯片显示到达各自的边界时，禁用幻灯片中的两个按钮（右/左） - fiddle;将背景颜色和光标类型更改为默认值就足够了。这是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);
}

代码不是我的，我的能力超出了我的需要。任何帮助，将不胜感激。感谢名单。

佩德罗

Answer 1

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

<强> jsFiddle example

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
}

Answer 2

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

我已更新您的jsfiddle代码，请参阅下文。

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

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

OR

您可以将它们全部从HTML中删除。

禁用按钮

2 个答案: