如何从群组上加载基于互联网的图像？

Question

我想在块上加载一个基于Internet的文件。我有10张图片，我想把它拆分为2块，在我的网站上显示，每块包含5张图片。块1完成后，块2将继续。我怎么能用jQuery做到这一点？

Answer 1

确定，

首先是HTML代码

<div id="imagesPanel">
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   More Images
</div>

接下来的Jquery代码

var countOfImages = 0;
var NumOfImagesPerBlock = 5;
var htmlStr = "";

$("#imagesPanel > img").each(function () {

   if (countOfImages == 0)
   {
       htmlStr += "<div class='imgblock'>";
       $("#imagesPanel").html("");
   }


   htmlStr += $(this)[0].outerHTML;
   countOfImages++;

   if (countOfImages % NumOfImagesPerBlock == 0)
   {
     htmlStr += "</div>";
     htmlStr += "<div class='imgblock'>";
     $("#imagesPanel").append(htmlStr);
     htmlStr = "<div class='imgblock'>";
    //alert("Mod" + countOfImages);
   }  
});

$('.imgblock').each(function(i) {
   $(this).delay(800 * i).fadeOut('fast', function() {
       $(this).fadeIn('slow');
   });
});

我会尽快解释：

1. 我创建了3个变量
2. countOfImages - 帮助计算每个函数中的图像数量
3. NumOfImagesPerBlock - 保存每个块的图像数量设置的变量
4. htmlStr - 将保存更新的html。
5. 然后我进入所有图像的循环，并在div中排列每5个图像。

基本上我是基于现有的HTML创建新的HTML。我将在所有图像上悬停并在每5张图像后添加。

Fiddle Example

我想请注意，如果您使用的是服务器端语言，则可能需要在服务器中执行此操作。

另一个注意事项：在我的小提琴示例中，我将图像的宽度和高度限制在40px的40px，因为如果图像到达页面的末尾则会自动分解

希望有所帮助