2011-11-29 41 views
0

我已经构建了自定义jQuery滑块(我知道Cycle等,但想使用自定义的滑块)。jQuery自定义滑块显示或隐藏导航按钮

它允许用户使用寻呼机以及我已设法使用的下一个和上一个按钮来导航滑块。

但是,因为我的滑块不循环(有意设计)我想在用户到达第一张幻灯片或最后一张幻灯片时隐藏并显示下一个和上一个按钮。

为此,我创建了一个函数,当用户单击按钮或传呼机并检查要显示或隐藏的内容时运行。但这是我卡住的地方。谁能帮忙?

这是滑块小提琴:http://jsfiddle.net/2WeMT/

我走到这一步的工作最接近的是:

if ($('div.slideshow > div:last').is(':visible')) { 
         $('.next').fadeOut(); 
        } else { 
         $('.next').fadeIn(); 
        } if ($('div.slideshow > div:first').is(':visible')) { 
         $('.previous').fadeOut(); 
        } else { 
         $('.previous').fadeIn(); 
        } 

但它并不显示正确的按钮时,中间页和它有时会感到困惑并隐藏并显示错误的按钮。

还试图加入这个解决中间页的问题,但再次引起问题:

if ($('div.slideshow > div:visible').prev(':hidden')) { 
         $('.previous').fadeIn(); 
        } 
        if ($('div.slideshow > div:visible').next(':hidden')) { 
         $('.next').fadeIn(); 
        } 

回答

0

添加到下一个按钮

if($('.slideshow div:last-child') === $('.slideshow div:visible')){ 
    $('.next').hide(); 
} 

添加到上一个

if($('.slideshow div:first-child') === $('.slideshow div:visible')){ 
    $('.previous').hide(); 
} 
+0

不适用于我恐怕。 – Cameron

+0

他们也需要淡入淡出 – Cameron

0

这确实工作虽然:

if ($('div.slideshow > div:first-child').is(':visible')) { 
        $('.previous').hide(); 
       } 
       else { 
        if ($('div.slideshow > div:visible').prev(':hidden')) { 
         $('.previous').show(); 
        } else { 
         $('.previous').hide(); 
        } 
       } 


       if ($('div.slideshow > div:last-child').is(':visible')) { 
        $('.next').hide(); 
       } else { 
        if ($('div.slideshow > div:visible').next(':hidden')) { 
         $('.next').show(); 
        } else { 
         $('.next').hide(); 
        } 
       }