0

私が抱えている問題は、説明がかなり複雑です。画像のスライドショーを表示する JavaScript を作成しましたが、必要以上のリソースを使用しているにもかかわらず、かなりうまく機能します

// imgArr[] is populated before    
var i = 0;
var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}

function loaded(i,f) {
if (document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}

}

function displaySlideshow() {
  document.getElementById(destinationId).innerHTML = '<div id="slideWindow"><img src="'+imgArr[i]+'" />'  +  '<img src="'+imgArr[i + 1]+'" /></div>';
  setTimeout('displaySlideshow()',1000*3);
  i++;
  if (i >= imgArr.length - 1)
     i = 0;
}
loaded(destinationId,displaySlideshow);

したがって、このスクリプトは 2 つの画像を HTML 要素に動的に追加し、それを div で囲みます。

div は画像の高さと幅でスタイル設定され、オーバーフロー (2 番目の画像) は非表示になります。2 番目の画像は最初の画像の下にあり、スライドショーは右から左に移動するように意図されています。

私の質問は 2 つあります。1) これを行うためのより効率的な方法はありますか? 2) 画像をアニメーション化するにはどうすればよいですか? CSSを使用して最初の画像の右側に2番目の画像を配置し、タイマーを設定して(スタイルを介して)画像を左に引っ張る必要がありますか?

4

2 に答える 2

0

フレームワークを使用していない場合は、多くの苦労が待ち受けていると思います。それでもフレームワークを使用したくない場合は、少なくとも自由にライセンスされているフレームワークを見つけて、ソース コードを確認してください。たとえば、次のようなものがあります。

基本的な理論は、はい、固定または何らかの数式 (sin、cos など) に基づいて、ある種の間隔で画像を移動するタイマーを設定することです。これらの間隔を密接に設定し、それらをたくさん作成すると、javascript で「アニメーション」が得られます。通常、ある種の絶対配置を使用し、1 つの要素を画面の外に移動すると、他の要素が移動します。

于 2009-12-11T06:49:32.370 に答える
0

独自のアニメーション ライブラリを作成することはお勧めしません。素晴らしい Marcel Laverdet によって作成された Facebook アニメーション ライブラリは、使い方が簡単で、スライドショーから必要なものを引き出すための多くのチュートリアルが付属しています。(注: FBJS のものは無視してください。自分のサイトで使用している場合でもまったく同じです。)

于 2009-12-11T06:42:31.107 に答える