Question

请求很简单，但很难谷歌。以下是要求：

我有一个带有图片网址的JS数组
我不有任何支持html
我想要一个像样的幻灯片插件来使用这个数组并给我一个幻灯片
幻灯片支持使用键盘导航（奖励）

到目前为止，我已经看到很多幻灯片插件需要大量复杂的支持html和css。构建这个html似乎有些愚蠢，无论如何它都可以通过幻灯片插件进行转换。

另外，我不知道这些幻灯片插件背后的代码有多糟糕。天哪！

Answer 1

这是我很快就能够开发出来的东西（完全没有测试过 - 只是为了创意）。这应该不难。

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();
};

Answer 2

关于键盘导航的Dunno，但我接受this similar question接受的答案应该让你解决。

编辑：刚刚意识到它还包括键盘导航。如果您愿意，请参阅how I implemented it以获取参考（单击作品集标签）。

Answer 3

浏览http://www.designfloat.com/上的一些过去的文章/项目 - 有很多优秀的jQuery样本可以帮助你做些什么。

此致

Rene Pilon

Answer 4

这个名为Cycle的jQuery插件是我见过的最好的幻灯片之一（不是灯箱类型）。我查看了文档，它似乎没有键盘支持，也没有为图像使用数组的选项，但它确实有动态添加更多图像的示例。无论如何，要自己判断。

用于从图片网址制作幻灯片的jquery插件

4 个答案: