在不同圖像的div中交換圖像

基本上我總共有30張圖像。我想在我的網站上顯示全部30張圖片，但它不可行。所以我想一次顯示10張圖片，在。在不同圖像的div中交換圖像

所以，當頁面加載前10個圖像顯示，然後點擊'更多'按鈕，下一個10顯示，再次點擊，最後10顯示。如果可能的話，它也可以使用上一個按鈕！

注意，圖像將需要從JavaScript文件加載，因爲所有30個圖像一次加載不是一個選項！

2014-03-06 user2144363

傑出的想法！到目前爲止你寫的是什麼？ – TimSPQR

假設您的圖片名稱按字母順序排列，即img1.png，img2.png ... img30.png。下面的示例代碼最初將顯示10幅圖像，並且在更多按鈕點擊時，它將顯示另一組圖像。

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var pgidx = 1; 
     var pgsize = 10; 

     //do the initial laod 
     showImage(pgidx); 

     $("#more").click(function(){ 
      pgidx +=1; 
      showImage(pgidx); 
     }); 

     function showImage(curidx){ 
      var offset = (curidx-1) * pgsize; 

      html = ""; 
      for (n=1; n<=pgsize; n++){ 
       html = html + '<img src="img' + (offset + n) + '.png" alt="" />'; 
      } 

      $("#image_view").html(html); 
     } 



    }); 
</script> 
</head> 
<body> 
<div id="image_view"> 
</div> 
<button id="more">More</button> 
</body> 
</html>

來源

2014-03-06 06:24:40

這似乎並不奏效。最初只顯示img1和img2，當點擊更多按鈕時，會顯示img11和img12。 – user2144363

我的錯誤是我僅用4張圖片測試了這個解決方案。在for循環中將n <= 2更改爲n <= pgsize。它現在應該工作。 –

在不同圖像的div中交換圖像

回答

相關問題