Question

我是jQuery的新手，我使用这个jQuery轮播。我不想使用任何插件。但是我想问一下，当我在第一张幻灯片上时，如何制作带有其他样式/颜色的prev按钮，当我在最后一张幻灯片时，如何使用其他样式/颜色制作下一个按钮。

这是演示

这里是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


     carousel.width(itemWidth*carouselChild.length);


        refreshChildPosition();


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

}

Answer 1

试试这个上一个按钮

var check = $(".carousel ul").position().left;
        if (check == 0)
        {
             $(".btnPrevious").css('color','red');  
        }

下一个类似的条件

 var cwidth = $(".carousel").width();
    var check = $(".carousel ul").position().left;
    if (check == -cwidth )
                {
                     $(".btnnext").css('color','red');  
                }

jQuery轮播新风格接下来和prev在第一张和最后一张幻灯片上

1 个答案: