jquery - グループのインターネットベースから画像をロードする方法は?

Question

ブロックごとに1つのインターネットベースのファイルをロードしたい。10 個の画像があり、それを 2 つのブロックに分割して Web サイトに表示したいと考えています。各ブロックには 5 つの画像が含まれています。ブロック 1 が終了すると、ブロック 2 が続きます。jQueryでどうやってそれを行うことができますか?

Answer 1

Ok、

最初に 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 の例では、画像がページの最後に達すると自動的に分割されるため、画像の幅と高さを 40px で 40px に制限しました。

それが役に立ったことを願っています