0

私はメインのホームページを持っています。そして、多くのサイトが現在行っていることと同じように、動的にいくつかの大きな画像を動的に表示したいと考えています。具体的には、表示したい900px x 400pxの5つの画像があります-Javascript setIntervalなどで実行できます-しかし、フェード効果も追加する方法を知りたいです-c#でコーディングしていますが、私が考えることができる唯一のエレガントな方法は、JavaScriptを使用することです.誰かがチュートリアルへのリンクを提供したり、好きな方法のコードスニペットを貼り付けたりできる場合は、感謝します. ありがとう！

4

3 に答える 3

2

C# でコーディングしてもフェード効果は得られません。Javascript が必要です。もちろん、C# を使用してイメージの最初のインスタンスを読み込むことができますが、エフェクトやタイマーを使用するものはすべて Javascript または jQuery である必要があります。ほとんどのサイトでは、実際にはこの主要なフェードイン/フェードアウト スライドショー機能に jQuery プラグインを使用しています。便利なスライダープラグインがたくさんあります。

自分で作成したい場合は、次のようなものがあります。

<img src="img0.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">

$(function() {

    var i = 0;

    // Four-second interval
    setInterval(function() {
        $("#img").fadeOut(function() {
            $(this).attr("src", "img" + i++ % 4 + ".jpg");
            $(this).fadeIn();
        });
    }, 4000);
}

4 秒ごとに、画像 1 から 4 を繰り返し、フェード インとフェード アウトします。

または、次のいずれかのように、ビルド済みの jQuery スライダー プラグインをダウンロードすることもできます。

于 2012-07-28T15:51:21.273 に答える
1

必要なのは jQuery 画像カルーサルです。

ここにいくつかの最高のリンクを掲載します。

1) http://wowslider.com/demo.html : すばらしい作品で、うまく統合できます。
2) http://www.jcoverflip.com/
3) http://galleria.io/ : 驚異的

また、独自の効果をより適切に実装できるように、 jQuery の効果を確認することもできます。

于 2012-07-28T15:46:05.530 に答える
0

BXSlider は軽量で使いやすい jquery スライダーです。

http://bxslider.comを参照してください。

特徴

  • 水平、垂直、およびフェード トランジション
  • 一度に複数のスライドを表示して移動する (カルーセル)
  • 前へ / 次へ、ページャー、自動コントロール
  • トランジションの緩和
  • ランダムスタート
  • ティッカーモード
  • 前、後、最初、最後、次、前のコールバック関数
  • オプションのスタイリングが含まれています
  • たくさんのオプション
于 2012-07-28T16:13:22.380 に答える