0

リクエストは単純なものですが、グーグルで検索するのは難しいです。要件は次のとおりです。

  • 画像のURLを含むJS配列があります
  • バッキングHTMLはありません
  • まともなスライドショープラグインでこの配列を使用してスライドショーを表示したい
  • スライドショーは、キーボードナビゲーションの使用をサポートしています（ボーナス）

これまでのところ、多くの複雑なバッキングhtmlとcssを必要とする多くのスライドショープラグインを見てきました。とにかくスライドショープラグインによって変換されるようにこのhtmlを構築するのは少しばかげているようです。

また、これらのスライドショープラグインの背後にあるコードの一部がどれほど悪いかはわかりませんでした。うわあ！

4

4 に答える 4

3

これが私がすぐにまとめたものです（まだテストしていません-それはアイデアのためだけです）あなたが開発できるかもしれません。難しいことではありません。

var imgs = ['a.png', 'b.png', 'c.png'];

function Slideshow(img_list, container) {
    var self = this;
    var $slides = [];
    var current = { 'ith': 0, '$slide': null };

    function initialize() {
        // Create the images
        img_list.map(function (i) {
            $slides.push($('<img>').attr('src', i).hide().appendTo(container));
        });     

        current.$slide = $slides[0];
        current.ith = 0;

        // Initialize binds (jquery hotkeys or something)
        $(document).bind('keydown', '>', function () {
            // Do stuff
            self.next();
        });

        $(document).bind('keydown', '<', function () {
            // Do stuff
            self.prev();
        });

    };

    this.indexTo = function (i) {
        current.$slide.hide();
        current.$slide = $slides[i];
        current.ith = i;

        if (current.$slide ==== undefined) {
            if (i < 0) {
                current.$slide = $slides[$slides.length - 1];
                current.ith = $slides.length - 1;
            } else {
                current.$slide = $slides[0];
                current.ith = 0;
            }
        }

        // Effects or something else
        return current.$slide.show();
    };

    this.next = function () {
        return self.indexTo(current.ith++);
    };

    this.prev = function () {
        return self.indexTo(current.ith--);
    };

    initialize();
};
于 2009-09-01T03:34:12.047 に答える
1

キーボードナビゲーションについては知らないが、この同様の質問に対する私が受け入れた答えはあなたを整理するはずだ。

編集：キーボードナビゲーションも含まれていることに気づきました。必要に応じて、参照用に実装した方法を参照してください（Folioタブをクリックします）。

于 2009-09-01T03:33:23.357 に答える
0

Cycleと呼ばれるこのjQueryプラグインは、私が見た中で最も優れたスライドショーの1つです（ライトボックスタイプではありません）。ドキュメントを調べたところ、キーボードがサポートされておらず、画像に配列を使用するオプションもありませんが、画像を動的に追加する例があります。とにかく、自分で判断してください。

于 2009-09-01T05:08:31.963 に答える
0

http://www.designfloat.com/の過去の記事/アイテムのいくつかを確認してください-あなたがやろうとしていることのかなりの数の優れたjQueryサンプルがあります。

よろしく、

ルネ・ピロン

于 2009-09-01T03:32:13.530 に答える