帶多個實例的點擊圖像庫（prev/next）

我是一名尋求幫助的新手。我想要做的是這樣的：帶多個實例的點擊圖像庫（prev/next）

我有大約9個項目列在我的主頁上，每個大圖都有。每個項目都有大約五個未顯示的圖像。

我想弄清楚如何點擊主圖像，並讓它加載下一個圖像在它的位置，留在同一頁面上，不需要轉換。如果點擊它們，我有文本鏈接到側面也可以控制「下一張」或「上一張」圖像。

我希望圖像（除了最初的9個）在需要時加載，因此我從一開始就不加載50張圖像。

我也很頭疼，試圖在同一頁面上創建九個獨立的圖庫/幻燈片。

現在，我使用了一個臃腫，雜亂的JavaScript，我一起入侵rto完成它，但它在瀏覽器中不穩定，我覺得它有很多不必要的代碼。所以我不會打擾發佈，我想我需要從頭開始。

我覺得這應該是相對簡單的，但我找不到任何插件或例子來做這個簡單的任務。

我是一個業餘愛好者，但我很想學習如何實際編碼它，所以如果有人知道任何教程可以幫助我，我會非常感激！我的腦海裏應該只是一些簡單的jQuery，但我不確定如何去做。

感謝您的幫助！

來源

2013-04-26 Graham

我覺得沒有理由重新發明輪子，只需使用這個http://nivogallery.dev7studios.com/ – user1477388 2013-04-26 18:09:34

如果必須推倒重來，這裏是一個裸露的骨頭簡單的例子：

http://jsfiddle.net/KDnPX/

HTML：

<img src=""> 
    <a href="#" class="prevImg">Previous</a> 
    <a href="#" class="nextImg">Next</a>

的Jquery：

var json = '{"0":"http://mw2.google.com/mw-panoramio/photos/medium/14748463.jpg", 
"1":"http://mw2.google.com/mw-panoramio/photos/medium/3840183.jpg", 
"2":"http://mw2.google.com/mw-panoramio/photos/medium/25214140.jpg"}'; 

var images = jQuery.parseJSON(json); 

// load first image 
$('img').attr('src', images[0]); 

var currImg = 0; 

$('.prevImg').click(function(){ 
    if (currImg - 1 >= 0) 
    { 
     // show previous image 
     $('img').attr('src', images[currImg - 1]); 
     currImg--; 
    } 
    return false; 
}); 

$('.nextImg').click(function(){ 
    if (currImg + 1 < Object.keys(images).length) 
    { 
     // show previous image 
     $('img').attr('src', images[currImg + 1]); 
     currImg++; 
    } 
    return false; 
});

來源

2013-04-26 18:30:33 user1477388

帶多個實例的點擊圖像庫（prev/next）

回答

相關問題