1

私は次の構造を持っています：

<div class="container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="image_wall_thumbnail" />
     <img src="images/3.png" class="image_wall_thumbnail" />
     <img src="images/4.png" class="image_wall_thumbnail" />
     <img src="images/5.png" class="image_wall_thumbnail" />
     <img src="images/6.png" class="image_wall_thumbnail" />
</div>

私がやりたいのは、画像タグで使用している既存の画像を使用することです.2〜5秒ごとに1つの画像をゆっくりとフェードさせ、その場所に別の画像（他の画像タグの既存の画像の1つ）を表示します。この効果をランダムに発生させたい。

今までやったことがないのでどうすればいいのかわからない？フェードインとフェードアウトは理にかなっていると思いますが、これに取り組む方法がわかりません。何か案は？

4

2 に答える 2

3

さて、他のプログラミング タスクと同じように、このような作業を単純なステップに分割する必要があります。この場合、おそらく次のようなものです。

  1. ページが読み込まれると、最初の画像のみが表示されます。これを行うにはdisplay:none、最初の画像を除くすべての画像に CSS ルールを設定する必要があります。hideこれは、 というクラスを作成し、それを HTML に適用することで簡単に実現できます。JS 経由でこれを管理することもできますが、ユーザーのインターネット接続によってはバグが発生する可能性があります...
  2. 5 秒ごとに現在の画像をフェードアウトさせ、次の画像をフェードインさせます。
  3. 最後の画像を表示している場合は、リストの最初の画像に戻るようにしてください。

必要な作業はこれでほぼすべてなので、コードを書きましょう。

まず、コンテナの ID を使用するようにマークアップをリファクタリングし、最初の画像を除くすべての画像に CSS クラスを追加します。

<div id="img_container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="hide image_wall_thumbnail" />
     <img src="images/3.png" class="hide image_wall_thumbnail" />
     <img src="images/4.png" class="hide image_wall_thumbnail" />
     <img src="images/5.png" class="hide image_wall_thumbnail" />
     <img src="images/6.png" class="hide image_wall_thumbnail" />
</div>

次に、少し CSS を書きましょう。

.hide {
    display:none;
}

さて、JSを書く「トリッキーな」部分です：

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container').find('img'),
      max = $img.length, //how many images you have in the container
      current = 0; //we will start the script at the first item

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img[current]).fadeOut('fast', function(){
      determineIndex(); //Update the index of the image in the img array
      $($img[current]).fadeIn();
    });
  }, 5000);

  function determineIndex () {
    current = (current === max - 1) ? 0 : (current + 1);
  }
});

これがデモです！http://jsfiddle.net/T2nzh/

JavaScript の仕組みについて質問がある場合は、コメントしてください。:)

編集：わかりました。画像ソースをランダムに交換したい場合は、これをチェックしてください。必要な html:

<div id="img_container">
     <img src="images/1.png" style="background:red" class="image_wall_thumbnail" />
     <img src="images/2.png" style="background:silver" class="image_wall_thumbnail" />
     <img src="images/3.png" style="background:purple" class="image_wall_thumbnail" />
     <img src="images/4.png" style="background:yellow" class="image_wall_thumbnail" />
     <img src="images/5.png" style="background:green" class="image_wall_thumbnail" />
     <img src="images/6.png" style="background:blue" class="image_wall_thumbnail" />
</div>

<div id="img_spares" style="display:none;">
     <img src="images/7.png" style="background:magenta" class="image_wall_thumbnail" />
    <img src="images/8.png" style="background:brown" class="image_wall_thumbnail" />
</div>

そしてJS：

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container'),
      $spares = $('#img_spares'),
      max = $img.find('img').length,
      spares_max = $spares.find('img').length;

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img.find('img')[randomIndex(0,max)]).fadeOut('fast', function(){
      var $el = $(this),
          el_source = $el.attr('style'),
          $swap = $($spares.find('img')[randomIndex(0,spares_max)]),
          swap_source = $swap.attr('style');

      $el.attr('style', swap_source).fadeIn();
      $swap.attr('style', el_source);
    });
  }, 1000);

  function randomIndex (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
});

そしてデモ: http://jsfiddle.net/T2nzh/3/

于 2013-10-20T23:10:24.653 に答える
1

見てください：

<div class="container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="image_wall_thumbnail" />
     <img src="images/3.png" class="image_wall_thumbnail" />
     <img src="images/4.png" class="image_wall_thumbnail" />
     <img src="images/5.png" class="image_wall_thumbnail" />
     <img src="images/6.png" class="image_wall_thumbnail" />
</div>

次にjQuery：

var slide = 1;

function slideshow() {
    $("#container").find("img").animate({opacity:0});
    setTimeout('$("#container").find("img").hide();',400);
    setTimeout('$("#container").find("[src='images/"+slide+".png']").show();',400);
    setTimeout('$("#container").find("[src='images/"+slide+".png']").animate({opacity:1});',400);
    slide++;
}

var slideshow = setInterval("slideshow();",3000);

また、不透明度を 0 に設定し、すべての画像の表示を none に設定します。このコードはテストされていないため、多少の調整が必要になる場合があります。

于 2013-10-20T22:40:33.423 に答える