2011-11-29 40 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(); 
        } 
       }