0

スムーズな効果（fadeIn、fadeOut、または不透明度はオプションではありません）である画像を別の画像に変更できる単純なクロスブラウザプラグイン/関数を探しています。コード：

<script type="text/javascript" >
imgtimer = setInterval(function() {

  // this is something what I'm looking for:
 var from = $('.visible');
 var to = $('.visible').next('img');
 changeimg(from,to,effect);
  // some function that could be able to hide one image
  // and show other with some effect.

}, 5000);
</script>

<div id="images">
  <img src="img_01.jpg" class="visible" />
  <img src="img_02.jpg" />
  <img src="img_03.jpg" />
</div>

何か案は？見栄えの良いプラグインを見つけることができます。複雑なスライダーは必要ありません。

4

2 に答える 2

2

http://canvasimg.sjeiti.com/

このプラグインのセットの重量は約22k最小化されています（不要なトランジション/イージングを取り除いた場合は少なくなります）

フェード、ズーム、ワイプ、フォールド、フリップ、ブラインド、サークル、スクエア、クロック、ウェーブ、パーティクル、ノイズ、シンプレックスノイズ、ドリップのトランジションを提供します。

線形、2次、3次、4次、5次、正弦波、指数関数、円形、弾性、バック、バウンスのイージングを提供します。

背景画像付きの画像を使用できます。キャンバス要素を使用すると、最良の結果が得られます（canvasは、すべての最新のブラウザー/ Androidでクロスブラウザーであり、IE9以前でもシムと互換性があります）

于 2013-01-25T18:28:20.730 に答える
0

プラグインはスライダーを作成するには重すぎます。私は次のようなことをしました: http://jsfiddle.net/k9e5f/8/独自のスライダーを開発するためのアイデアを得ることができます。

次のように、1 つの画像と 1 つの div を使用するだけです。 

<div id="background_container">
    <img id="changer" />
</div>

そのスライダーを見てください。必要なすべての画像で機能します。私はそれを自分で作りました;）

于 2013-01-25T17:18:30.767 に答える