jQuery 下一个和上一个按钮

Question

我对 jQuery 很陌生，我使用这个 jQuery 轮播。我不想使用任何插件。我尝试在最后一张和第一张幻灯片上使我的下一个和上一个按钮另一种颜色。这几乎是工作。问题是按钮在最后一张和第一张幻灯片上不再显示时也会保持“红色”

这里是演示 http://jsfiddle.net/rGLsG/70/

$(function(){
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;

    itemWidth = carousel.find('li:first').width()+1; //Including margin

    //Set Carousel width so it won't wrap
    carousel.width(itemWidth*carouselChild.length);

    //Place the child elements to their original locations.
    refreshChildPosition();

    //Set the event handlers for buttons.
    $('.btnNext').click(function(e){        
        if($(".carousel").find("li:eq(6)").text()!=14) {
            if(canClick) {
                canClick = false;
                clickCount++;
                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left : '-='+itemWidth
                },300, function(){
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                    canClick = true;
                });
            }
        }


                if(canClick) {
            canClick == 14;  {
             $(".btnNext").css('color','red');  
        }

                    canClick = true; 
        }
    });

    $('.btnPrevious').click(function(){
        if($(".carousel").find("li:eq(0)").text()!=1) {
            if(canClick){
                canClick = false;
                clickCount--;
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);

                lastItem.css('left', itemWidth*clickCount);             
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+='+itemWidth
                },300, function(){
                    canClick = true;
                });
            }
        }


                if(canClick) {
            canClick = false;  {
             $(".btnPrevious").css('color','red');  
        }

                    canClick = true; 
        }
    });

    function refreshChildPosition(){
        carouselChild.each(function(){
            $(this).css('left', itemWidth*carouselChild.index($(this)));
        });
    }
});

Answer 1

如果应该修复它的语句，只需添加 2 个：

$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;

itemWidth = carousel.find('li:first').width()+1; //Including margin

//Set Carousel width so it won't wrap
carousel.width(itemWidth*carouselChild.length);

//Place the child elements to their original locations.
refreshChildPosition();

//Set the event handlers for buttons.
$('.btnNext').on("click",function(e){   
    if($('.btnPrevious').css("color")=="rgb(255, 0, 0)"){
        $('.btnPrevious').css("color","");
    }    


    if($(".carousel").find("li:eq(6)").text()!=14) {
        if(canClick) {
            canClick = false;
            clickCount++;
            //Animate the slider to left as item width 
            carousel.stop(false, true).animate({
                left : '-='+itemWidth
            },300, function(){
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:first');
                lastItem.remove().appendTo(carousel);
                lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                canClick = true;
            });
        }
    }


            if(canClick) {
        canClick = false;  {
         $(".btnNext").css('color','red');  
    }

                canClick = true; 
    }
});

$('.btnPrevious').on("click",function(){
    if($('.btnNext').css("color")=="rgb(255, 0, 0)"){
        $('.btnNext').css("color","");
    }

    if($(".carousel").find("li:eq(0)").text()!=1) {
        if(canClick){
            canClick = false;
            clickCount--;
            //Find the first item and append it as the last item.
            lastItem = carousel.find('li:last');
            lastItem.remove().prependTo(carousel);

            lastItem.css('left', itemWidth*clickCount);             
            //Animate the slider to right as item width 
            carousel.finish(true).animate({
                left: '+='+itemWidth
            },300, function(){
                canClick = true;
            });
        }
    }


            if(canClick) {
        canClick = false;  {
         $(".btnPrevious").css('color','red');  
    }

                canClick = true; 
    }
});

function refreshChildPosition(){
    carouselChild.each(function(){
        $(this).css('left', itemWidth*carouselChild.index($(this)));
    });
}
});

Answer 2

你的 javascript 有点乱。目前你有这个：

if(canClick) {
    canClick = false;  {
         $(".btnNext").css('color','red');  
    }

    canClick = true; 
 }

这没有意义。并且没有其他块可以撤消颜色：

if(canClick) {
    canClick = false;
    $(".btnNext").css('color','red');  
} else {          
    canClick = true; 
    $(".btnNext").css('color','');
}

Answer 3

$(function() {
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;

    itemWidth = carousel.find('li:first').width() + 1; //Including margin

    //Set Carousel width so it won't wrap
    carousel.width(itemWidth * carouselChild.length);

    //Place the child elements to their original locations.
    refreshChildPosition();

    //Set the event handlers for buttons.
    $('.btnNext').click(function(e) {
        if ($(".carousel").find("li:eq(6)").text() != 14) {
            if (canClick) {
                canClick = false;
                clickCount++;
                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left: '-=' + itemWidth
                }, 300, function() {
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', ((carouselChild.length - 1) * (itemWidth)) + (clickCount * itemWidth));
                    canClick = true;
                });
            }
        }
        if ($(".carousel").find("li:eq(0)").text() >= 1) {
            $(".btnPrevious").css('color', '');

        }
        if (canClick) {
            canClick = false; {
                $(".btnNext").css('color', 'red');
            }

            canClick = true;
        }
    });

    $('.btnPrevious').click(function() {
        if ($(".carousel").find("li:eq(0)").text() != 1) {
            if (canClick) {
                canClick = false;
                clickCount--;
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);

                lastItem.css('left', itemWidth * clickCount);
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+=' + itemWidth
                }, 300, function() {
                    canClick = true;
                });
            }
        }
        if ($(".carousel").find("li:eq(6)").text() != 14){
            $(".btnNext").css('color', '');
        }

        if (canClick) {
            canClick = false; {
                $(".btnPrevious").css('color', 'red');
            }

            canClick = true;
        }
    });

    function refreshChildPosition() {
        carouselChild.each(function() {
            $(this).css('left', itemWidth * carouselChild.index($(this)));
        });
    }
});

检查这个http://jsfiddle.net/rGLsG/92/