如何获得最后一张和第一张幻灯片以使下一个和上一个按钮处于活动状态或相应地禁用

Question

我已经创建了这个滑块代码...

尝试获取第一张和最后一张幻灯片以激活下一个和上一个按钮或禁用相应的按钮...谁能帮我获得它..

$(document).ready(function(){   
    $('.myslider-wrapper').each(function(){

    // thumbSlide
        var countSlider = $('.thumbSlide', this).length;
        if((".thumbSlide").length){        
            // Declare variables
            var totalImages = $(".thumbSlide > li", this).length, 
                imageWidth = $(".thumbSlide > li:first", this).outerWidth(true),
                totalWidth = imageWidth * totalImages,
                visibleImages = Math.round($(".thumbSlide-wrap", this).width() / imageWidth),
                visibleWidth = visibleImages * imageWidth,
                stopPosition = (visibleWidth - totalWidth/countSlider);  
            $(".thumbSlide", this).width(totalWidth+10);
        }
                $(".thumbSlide-prev", this).click(function(){
                var parentMove = $(this).parent().prev('.thumbSlide');
                if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
                    parentMove.animate({left : "+=" + imageWidth + "px"});
                }               
                return false;
            });        
            $(".thumbSlide-next", this).click(function(){
                var parentMove = $(this).parent().prev('.thumbSlide');
                if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
                    parentMove.animate({left : "-=" + imageWidth + "px"});                  
                }               
                return false;
            });        

     });

});

jsfiddle：http://jsfiddle.net/GLSqS/1/

非常感谢..

Answer 1

你可以这样做，而不是下一张和上一张的类，每张幻灯片使用 id 来隐藏那个特定的而不是全部，我把它留给你，

我对该代码进行了一些更改以显示和隐藏下一个和上一个按钮：

if($('.thumbSlide li:first')){
        $('.thumbSlide-prev').hide();
                }
            $(".thumbSlide-prev", this).click(function(){
            var parentMove = $(this).parent().prev('.thumbSlide');
             $(".thumbSlide-next").show();   
            if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
                parentMove.animate({left : "+=" + imageWidth + "px"});
            }else{
            $('.thumbSlide-prev').hide();
            }               
            return false;
        });        
        $(".thumbSlide-next", this).click(function(){
            var parentMove = $(this).parent().prev('.thumbSlide');
            //var parent=$(this).parent();
            $(".thumbSlide-prev").show();                
            if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
                parentMove.animate({left : "-=" + imageWidth + "px"});                  
            }else{
            $(".thumbSlide-next").hide();
            }               
            return false;
        });

演示Fiddle

Answer 2

我稍微修改了您的代码。试试下面的小提琴。

$(document).ready(function(){   
$('.myslider-wrapper').each(function(){

// thumbSlide
    var countSlider = $('.thumbSlide', this).length;
    if((".thumbSlide").length){        
        // Declare variables
        var totalImages = $(".thumbSlide > li", this).length, 
            imageWidth = $(".thumbSlide > li:first", this).outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round($(".thumbSlide-wrap", this).width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth/countSlider);  
        $(".thumbSlide", this).width(totalWidth+10);
    }
            $(".thumbSlide-prev", this).click(function(){
            var parentMove = $(this).parent().prev('.thumbSlide');
            if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
                parentMove.animate({left : "+=" + imageWidth + "px"});
                  $(this).parent().find('.disable').removeClass('disable');
            }else{
            $(this).parent().find('.thumbSlide-prev').addClass('disable');    
            }               
            return false;
        });        
        $(".thumbSlide-next", this).click(function(){
            var parentMove = $(this).parent().prev('.thumbSlide');
            if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
                parentMove.animate({left : "-=" + imageWidth + "px"});
                 $(this).parent().find('.disable').removeClass('disable');
            }else{

            $(this).parent().find('.thumbSlide-next').addClass('disable');

            }               
            return false;
        });        

 });

});

Updated Fiddle