jQuery next和prev按钮

Question

我是jQuery的新手，我使用这个jQuery轮播。我不想使用任何插件。我尝试在最后和第一张幻灯片上使我的下一个和上一个按钮成为另一种颜色。这几乎是可行的。问题是按钮保持＆＃34;红色＆＃34;当他们在最后和第一次幻灯片上没有更多时

这是演示 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

你的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 2

刚刚添加了2个if语句，应该修复它：

$(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 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/