具有動態prev/next內容的jQuery滑塊的最佳方法？

Question

這是一個有點複雜的難題，我很樂意提供一些關於其他人如何解決這個問題的反饋。

這個網站基本上是一個免費的區域新聞博客。底部的圖像演示了佈局（忽略日期重疊毛刺）。它用PHP，jQuery和xajax編碼。

我的問題與動態內容加載有關。就像在頁面加載時一樣，我將箭頭分配到前一篇/下一篇文章的URL。沒問題。網址很友善，頁面重新加載到下一篇文章，我可以整天瀏覽它們。

但是...... 我想轉箭與以下行爲滑塊（不是一個href）：

點擊右箭頭將...

1. 開始加載新的內容通過xajax的屏幕外，
2. 因爲舊的內容向左右滑動（從屏幕到屏幕之外） 平齊新的內容還剩下滑動（從屏幕外到屏幕上 ）。

爲什麼？滑塊非常棒，我認爲它看起來很親。這是基本的東西滑塊（如this jQuery scrollLeft slider），除了與內容進行動態加載上的箭頭，這引起了一些問題的點擊：

• 什麼是我們的最佳方法呢？
• 我是否使用PHP預先填充所有空的隱藏文章DIV？
• 我是否使用jQuery在每個箭頭單擊後附加/前綴/刪除文章DIV？
• jQuery「scrollLeft」偏移量會是什麼樣子？內容DIV是靜態寬度，但我會更好用jQuery scrollTo？

我希望我的問題很清楚......任何建議將不勝感激！

Answer 1

下面是我提出的解決方案。

http://jsfiddle.net/tXUwZ/

如果任何人有關於如何清理或使其更嚴格的想法，請讓我知道！

非常感謝@Jamie推動正確的方向！

Answer 2

你必須在我看來兩個選項：

1. 填充在頁面加載每個滑塊，jQuery的點擊功能動畫內容
2. 使用AJAX調用
填充在每張幻燈片的基礎數據

如果它只是一些項目/幻燈片，那麼我會填充頁面加載。如果您正在查看大量幻燈片（您可能會期望每日新聞博客），或者如果每張幻燈片都包含大量數據（如高分辨率圖像等），則可以使用第二種方法。

第二個選項很容易做到。所有你需要的是三個div（一個用於屏幕幻燈片，兩個用於側面屏幕外幻燈片，當單擊任一箭頭時將'替換'屏幕上的幻燈片）。我會用這樣的：

<div class="container"> 
    <div class="inner-container"> 
     <div class="back"></div> 
     <div class="content off_screen_left" id="1"></div> 
     <div class="content on_screen" id="2"></div> 
     <div class="content off_screen_right" id="3"></div> 
     <div class="next"></div> 
    </div> 
</div> 

而且所需的CSS：

.container{width:200px;height:150px;overflow:hidden} 
.inner-container{width:600px;height:150px;margin-left:-200px} 
.content{float:left;width:200px;height:150px} 

至於jQuery的：

$(".next").live('click', function(){ 
    var current_id=$(this).prev(".on_screen").attr("id"); // get current page ID 
    $(".content").css("float","right"); // float all elements to the right 
    $(".off_screen_right").animate({display:none;}); // make the furthest right disappear gradually 
    $(".on_screen").attr("class","off_screen_right"); // make on_screen the new off_screen_right and add the correct ID attribute 
    $(".off_screen_left").attr("class","content on_screen"); // make off_screen_left the new on_screen 
    $(".container").prepend('<div class="content off_screen_left" id="'+current_id-1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute 
    $(".off_screen_left").load("load-content.php?page_id="+current_id-1); // populate the new off_screen_left element 
}); 
$(".back").live('click', function(){ 
    var current_id=$(this).next(".on_screen").attr("id"); // get current page ID 
    $(".content").css("float","left"); // float all elements to the left 
    $(".off_screen_left").animate({display:none;}); // make the furthest left disappear gradually 
    $(".on_screen").attr("class","off_screen_left"); // make on_screen the new off_screen_left and add the correct ID attribute 
    $(".off_screen_right").attr("class","content on_screen"); // make off_screen_right the new on_screen 
    $(".container").append('<div class="content off_screen_right" id="'+current_id+1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute 
    $(".off_screen_right").load("load-content.php?page_id="+current_id+1); // populate the new off_screen_left element 
}); 

但是，這只是一個選項。你可以使用滑塊開箱即用，但我更喜歡定製代碼，以便我確切地知道我在做什麼。