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

您的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，如果該語句可以解決該問題：

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