jQuery的下一个和上一个按钮 [英] jQuery next and prev button

问题描述

我对jQuery非常陌生，并且使用了这个jQuery轮播.我不想使用任何插件.我尝试在上一张和第一张幻灯片上使我的下一个和上一个按钮变为另一种颜色.差不多了.问题在于，当按钮不在最后一张和第一张幻灯片上时，它们也会保持红色"状态

I'm very new with jQuery and I use this jQuery carousel. I don't want to use any plugin.I try to make my next and prev button another color on last and first slide. That's almost work. The problem is that buttons stay "red" also when they are not more on last and first slide

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

推荐答案

如果需要修正的陈述只是添加2:

just addaed 2 if statments that should fix it:

$(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)));
    });
}
});

这篇关于jQuery的下一个和上一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！