0

複数の画像がグリッドに配置された Web ページのレイアウトに取り組んでいます。これらの画像のいくつかを 2 つまたは 3 つの異なる画像を回転させたいと思います。一部の画像は他の画像とは異なる速度で回転し、各画像間のフェード効果はそれほど急激ではありません。JavaScript プログラムを検索しましたが、思いついたものはすべて、ページ上で一度に 5 つの個別の画像を変更することを好まないようです。同じプログラムを5つの異なる名前で5回実行できるという提案をいくつか読みましたが、試したすべてのプログラムで失敗しました(最初のプログラムは正常に動作し、残りは静止画像を表示するだけです)。

私は現在、5 つの画像すべてを回転させるソリューションを持っていますが、フェードなしですべて同時に行うため、ここでは滑らかなフェード遷移ではなく、一度に 5 つの画像が非常にぎくしゃくして突然切り替わるように見えます。そしてそこに。また、数サイクル実行した後、動かなくなったように見えます...スタック？ちらつきと奇妙に見えます。

ああ、各画像はグリッドレイアウトのために特定の座標で絶対に配置されるため、問題を引き起こさないものが必要です(つまり、画像の周りにフレーム/境界線がないなど)。

私が現在持っているものは次のようになります。

<script type="text/javascript">
var ready = 0;
var which = 1;
function isReady( ) {
++ready;
  if ( ready == 2 ) {
  ready = 0;
  setTimeout("swap()",6000);
  }
}
function swap( ) {
var i1 = document.getElementById("tst1");
var i2 = document.getElementById("tst2");
var i3 = document.getElementById("tst3");
var i4 = document.getElementById("tst4");
var i5 = document.getElementById("tst5");
var cur = which;
which = ( cur == 0 ) ? 1 : 0;
i1.src = i1.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i2.src = i2.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i3.src = i3.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i4.src = i4.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i5.src = i5.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
}
</script>

この HTML では:

<!-- row a --> 
<!-- top row image (140px x 140px) that rotates in square a2--> 
<img id="tst1" class="a2" src="/wp-content/themes/silk/images/home-a2-0.jpg" 
  onload="isReady()"
  alt="brushes"/>

<!-- static image (140px x 140px) in square a3 --> 
<img id="estd" class="a3" src="/wp-content/themes/silk/img/2012-home.gif" alt="2012" />
<!-- top row large image (280px x 280px) that rotates in square a5 -->
<img id="tst2" class="a5" src="/wp-content/themes/silk/images/home-a5-0.jpg" 
  onload="isReady()"
  alt="stations"/>

<!-- row b -->
<!-- static image (280px x 280px) in square b1-->
<div id="logo" class="b1"><h1>Silk the Salon</h1></div>

<!-- static image (140px x 140px) in square b4-->
<img id="b4" class="b4" src="/wp-content/themes/silk/images/home-b4-0.jpg" alt="backsplash" />

<!-- middle row image (140px x 140px) that rotates in square b7 -->
<img id="tst3" class="b7" src="/wp-content/themes/silk/images/home-b7-0.jpg" 
  onload="isReady()"
  alt="floor"/>

<!-- row c -->
<!-- bottom row image (140px x 140px) that rotates in square c3 -->
<img id="tst4" class="c3" src="/wp-content/themes/silk/images/home-c3-0.jpg" 
  onload="isReady()"
  alt="stations2"/>     

<!-- bottom row image (140px x 140px) that rotates in square c3 -->
<img id="tst5" class="c6" src="/wp-content/themes/silk/images/home-c6-0.jpg" 
  onload="isReady()"
  alt="counter"/>

誰でも私に与えることができるどんな助けでも大歓迎です！

4

1 に答える 1

0

あなたのコードはあまりきれいではなく、さまざまな方法で改善できます。簡単な jsFiddle の例を作成して、1 つまたは 2 つの方法を示しました: http://jsfiddle.net/pASkk/

いくつかのコメント:

  1. グローバル変数を使用しないでください。他のコードと衝突します。すべてのコードを囲むクロージャを作成するために、自己実行型の周囲関数を作成しました。これで綺麗に保てます。

  2. インライン コーディング (「onload」属性) を使用しないでください。js コードを html から分離しておいてください。もちろんCSSも同様です。実際、私の例では、オンロードが不要であることがわかりました。すべてのコードは、dom の一部が解析された後に実行されるため、この例では十分です。ページの下部 (頭ではなく) に JavaScript をロードしたいので、通常はこれで十分です。とにかく onload にバインドしたい (jQuery などのライブラリを使用しない) 場合は、http ://www.quirksmode.org/js/events_advanced.html を参照してください。

  3. スワップの繰り返しには setInterval を使用し (または、ここで誤解していましたか?)、setInterval または setTimeout で関数を呼び出すために文字列を使用しないでください。代わりに無名関数を使用してください。

シングルスワップ用に別の関数を作成しました。私はあなたの画像ソースにアクセスできなかったので、あなたが望む方法で取得するには、これに取り組む必要があります. よりスムーズな画像交換を行いたい場合は、jQuery fadeIn (http://api.jquery.com/fadeIn/) などを使用することをお勧めします。ライブラリを使用できない場合は、ソース コードをチェックして、どのように作成されたかを確認できます。

幸運を祈ります

于 2012-05-07T06:48:15.783 に答える