jQuery轮播隐藏下一个并在第一张和最后一张幻灯片上显示

Question

我是jQuery的新手，我使用这个jQuery轮播。我不想使用任何插件。但是我想问一下，当我在第一张幻灯片上时，如何隐藏下一个按钮，当我在最后一张幻灯片时，如何隐藏下一个按钮。

这是演示

http://jsfiddle.net/rGLsG/24/

这里是jQuery代码

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

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

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

}）;

  <a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
    </ul>
</div>

Answer 1

http://jsfiddle.net/rGLsG/67/

$(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' ) {
         $('.btnPrevious').show();
        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(7)").text()=='14'){
              $('.btnNext').hide();  
            }
        }
    } 
});

$('.btnPrevious').click(function(){

    if($(".carousel").find("li:eq(0)").text()!=1) {
        $('.btnNext').show();
        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(0)").text()=='1'){
              $('.btnPrevious').hide();
            }
        }
    } 
});

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

}）;