試圖創建一個簡單的圖庫滑塊

我試圖「分流」滑塊中的圖像集合的位置左/右，每當用戶單擊滑塊中的相應按鈕。我有這個工作，但代碼是有點大和重複，所以我一直在試圖把它清除掉一點點，這是它在它的當前狀態：試圖創建一個簡單的圖庫滑塊

$('#btnRight').click(function (e) { 
    e.preventDefault(); 
    if (parseInt(6 + indexx) != 10) { 
     indexx++; 
     $('#first').attr('src', $('#second').attr('src')); 
     $('#second').attr('src', $('#third').attr('src')); 
     $('#third').attr('src', $('#fourth').attr('src')); 
     $('#fourth').attr('src', $('#fifth').attr('src')); 
     $('#fifth').attr('src', $('#sixth').attr('src')); 
     $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + indexx) + '.png'); 
    } 
});

你可以看到，它的手動選擇每個元素並交換source屬性以將圖像移動到右側。

這裏是我一直在努力改進的代碼，但完全不是那麼回事：

$('#btnLeft').click(function (e) { 
    e.preventDefault(); 
    $("#gallerySlider img").each(function (index) { 
     $(this).attr("src", $(this).prev().attr("src")); 
    }); 
});

這需要在第一圖像當前集合中，只是將所有圖像的源#gallerySlider這是錯誤的。但是，如果我將相同的代碼放入警報中，它會正確顯示圖像，並且它是之前的圖像，例如輸出類似於：

/Content/Images/Design/Thumbs/10.png Previous Image: /Content/Images/Design/Thumbs/9.png

所以它的正確選擇圖像，並給我回到正確src，但爲什麼這一切都在滑塊圖像的源設置爲同一個？當然，它應該通過所有這些，：

$(this).prev().attr("src")

將是每一個有什麼不同？

任何人都可以看到我在這裏出錯了嗎？

三江源

來源

2012-08-10 dtsg

user1166905的答案聽起來非常好。一個解決方案是，如果你想移動到左邊，你將第一個元素從div中移出並放回到div的末尾。如果按右鍵，情況也是如此。您從列表中取出最後一個元素，將其從div中移除，並將其重新放置在圖庫div的開頭。

$('#btnLeft').click(function (e) { 
    e.preventDefault(); 
    $('#gallerySlider').append($("#gallerySlider img").first()); 
}); 

$('#btnRight').click(function (e) { 
    e.preventDefault(); 
    $('#gallerySlider').prepend($("#gallerySlider img").last()); 
});

我認爲應該做的伎倆

來源

2012-08-10 09:07:50 bkwint

我會試試看，似乎有道理。我想到的另一個想法是將所有圖像存儲在數組中，然後使用'each'中的索引正確設置源？ – dtsg 2012-08-10 09:09:24

您的陣列解決方案將工作，但是當您使用它時，您將不得不在兩個位置維護您的圖像列表，我通常不會這樣做，因爲它可能會在未來造成問題;） – bkwint 2012-08-10 09:11:39

工作正常，謝謝！不必擔心邊界檢查，因爲它只是循環，好東西。 – dtsg 2012-08-10 09:12:42

如果你想象圖像1「img1.jpg」和圖像2「img2.jpg」等

你已經把將設置圖像2「img1.jpg」的代碼，然後下一步它會將圖像3設置爲圖像2的src，該圖像現在將成爲「img1.jpg」，並且該圖像最終將成爲所有圖像的src。那有意義嗎？

你是否在線尋找jQuery類型庫插件，因爲有負載在那裏會爲你做這項工作？

來源

2012-08-10 08:58:38 user1166905

是的，我明白你的意思了。糟糕！我寧願不使用插件，我是jQuery的新手，所以想盡可能多地學習，而不是每次遇到問題時都抓住一個插件。 – dtsg 2012-08-10 09:05:17

試圖創建一個簡單的圖庫滑塊

回答

相關問題