2014-11-20 3 views
0

Я очень новичок в jQuery, и я использую эту карусель jQuery. Я не хочу использовать какой-либо плагин. Но я хочу спросить, как я могу показать предыдущую кнопку в начале каруселью, и оно должно быть также красным в начале/первый слайдjQuery previous button show

здесь демо

http://jsfiddle.net/rGLsG/94/

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

ответ

1

Добавить $(".btnPrevious").css('color', 'red').show(); линия в

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

DEMO

+0

Удаление 'display: none' из CSS, вероятно, лучше для его отображения – Rhumborl

+0

@Rhumborl, да, хороший вариант, но тогда OP нужно добавить' .css ('color', 'red') 'также потому, что нужно показать в красном, если не существует предыдущего элемента. Итак, зачем менять как css, так и скрипт, просто измените его. –