Question

我是jQuery的新手，我使用这个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' ) {
        $('.btnPrevious').show();
      $(".btnPrevious").css('color', '');
        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").css('color', 'red');
            }
        }
    } 
});

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

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

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

Answer 1

在$(".btnPrevious").css('color', 'red').show();

中添加此$(function(){...})行

$(function(){
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;
    $(".btnPrevious").css('color', 'red').show();
    itemWidth =......

<强> DEMO

jQuery上一个按钮显示

1 个答案: