在不同图像的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中交换图像

回答

相关问题