Javascript的div滑塊沒有jquery

我期待寫一個JavaScript的div滑塊。我嘗試了用於div滑動的JQuery插件。然而，因爲我們的應用程序是動態生成的，所以目前的jQuery插件似乎不能正確渲染滑塊。Javascript的div滑塊沒有jquery

因此認爲，如果我能寫一個簡單的滑塊，將在滑塊方式切換兩個div。

基本上，我會有兩個div和一個左按鈕和一個右下角。

<img src='images/left'></img> 
<div id='content-one'>My First content </div> 
<div id='content-two'>My Second content </div> 
<img src='images/right'></img>

所以當我點擊右鍵時，第一個內容應該滑動到第二個（水平）。同樣的方法，我可以用左鍵翻回來。具有在轉換之間延遲1秒的能力會很有幫助。

任何關於如何寫這個指針都會很有幫助。

Thx

來源

2012-08-26 user1402539

爲什麼把'沒有jquery'在你的標題和標記問題jquery？ – orhanhenrik

好點...我認爲有人誰是jquery很好也可能知道在Javascript中的替代..事實上，我很好，使用普通的查詢效果，如果他們不jQuery插件.. – user1402539

我敢肯定，有一個jQuery插件，可以做你需要 – orhanhenrik

這是你在找什麼？ Fiddle。

不使用jQuery。
注意佈局略有變化（內容DIV在一個容器中）。
用於溢出，顯示，填充和邊距的CSS是必需的。

我剛剛寫了最基本的線性滾動，你可以隨意修改它。

來源

2012-08-26 01:04:57

我過於複雜的我的解決方案，您可以通過只'.offsetWidth'當容器DIV的大小與內容DIV –

輝煌編碼的朋友......愛了你編寫的PrettyScroll功能以同樣的方式滾動。它就像魅力一樣......我可以從你的代碼中學到很多CSS和JS選項..我現在將通過你的代碼來理解你做了什麼魔法！我有一個問題 - 我正在嘗試 - 我想你可以給我一些指示。當我按下右鍵時，「內容一」向左移動，顯示「內容二」。現在，如果再次按右側，是否可以將「內容二」移動到左側，並顯示「內容一個「？希望你能給我一些提示。我想看看我是否可以自己寫！ – user1402539

我會用'.cloneNode（true）;'克隆第一個內容，將克隆附加到最後，像往常一樣向右滾動，然後設置'.scrollLeft = 0'和（如果是靜態的，可以選擇保存處理）刪除克隆的節點。同樣，從第一個到最後一個向左滾動，附加第一個節點的克隆，跳轉滾動到它，然後像往常一樣向左滾動並移除它。如果你沒有刪除它，請確保你不要添加新的。 –

Javascript的div滑塊沒有jquery

回答

相關問題