2

私は、次/前のボタンを備えた単純なjqueryローテーターを探していました.5枚ほどの画像を自動的にフェードします...これまでのところ、すべてが複雑すぎて、私が望むものや単純なものではありません画像の切り替え以外の機能はありません...

だから基本的に私は誰かが完全に吸わないJquery画像回転子を知っているかどうか尋ねています...笑

ところで、これらは私がやりたいことです

  1. 画像を自動的に回転
  2. フェード
  3. 次と前のボタンがある

ありがとう

4

6 に答える 6

8

あなた自身のものをつくる。かなり単純なスクリプトです。
このようなものがあなたを始めるかもしれません:

html:

<div class="rotator">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
</div>
<a id="rotator-prev" href="#">Previous</a> 
<a id="rotator-next" href="#">Next</a>

JavaScript:

$(document).ready(function() {
    var allImgs = $('.rotator img');

    allImgs.css({
        position: 'absolute',
        top: 0,
        left: 0
    }).hide();

    var currIdx = 0;
    allImgs.first().show();

    function next() {
        var nextIdx = currIdx + 1;
        if (nextIdx >= allImgs.length) nextIdx = 0;
        allImgs.eq(currIdx).fadeOut();
        allImgs.eq(nextIdx).fadeIn();
        currIdx = nextIdx;
    }

    function prev() {
        var prevIdx = currIdx - 1;
        if (prevIdx < 0) prevIdx = allImgs.length - 1;
        allImgs.eq(currIdx).fadeOut();
        allImgs.eq(prevIdx).fadeIn();
        currIdx = prevIdx;
    }

    function doAuto() {
        next();
        setTimeout(doAuto, 5000);
    }
    setTimeout(doAuto, 5000);

    $('#rotator-prev').click(function(evt) {
        evt.preventDefault();
        prev();
    });
    $('#rotator-next').click(function(evt) {
        evt.preventDefault();
        next();
    });
});

このコードは、jsFiddle: http://jsfiddle.net/SXcNy/ で実行されている実際の画像 (およびいくつかの CSS 調整)で確認できます。

于 2011-02-21T06:01:50.717 に答える
1

これまでに見つけた中で最高のものは、ZurbクルーのOrbitです。最近、 Foundation フレームワークに同化されましたが、ここからスタンドアロン プラグインをダウンロードできます。

コードは非常に軽量で、直感的なコントロールを提供するだけでなく、再生/一時停止ボタンと統合された気の利いたタイマーがあります。無料のソリューションという点では、断然最良の選択です。

より多くのホイッスル/ベルとファンシーなプロトランジションを備えたものを購入したい場合は、WOW SliderまたはTN3 Galleryをチェックしてください。

于 2012-02-29T22:32:52.677 に答える
0

jQuery Web サイトのプラグインだけでは十分ではないのはなぜですか。これで必要なものはすべて揃っていますhttp://plugins.jquery.com/plugin-tags/image-rotator

ここにデモがあります： http://wowslider.com/jquery-slider-pinboard-fly-demo.html

于 2011-02-21T05:41:19.857 に答える
0

jCarousel を試す

http://sorgalla.com/jcarousel/

于 2011-02-21T06:13:21.587 に答える
0

私はあなたと同じ問題を抱えていました.単純な画像/コンテンツスライドショープラグインが欲しかったのですが、必要のない機能やスキンなどをたくさん備えたものしか見つかりませんでした. そこで私はBasic jQuery Sliderを作成しました - フル機能のプラグインを使用して不要な機能を削除するのではなく、必要に応じて拡張できるシンプルなプラグインを用意したのです。試してみて問題が発生した場合は、お知らせください。できる限りお手伝いさせていただきます。

于 2012-03-01T06:15:39.730 に答える