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"});
                }               
                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/

非常感谢..

4

2 回答 2

2

你可以这样做，而不是下一张和上一张的类，每张幻灯片都使用 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;
        });

演示小提琴

于 2013-09-04T12:02:52.110 回答
1

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

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

 });

});

更新小提琴

于 2013-09-04T12:40:40.287 回答