0

这个请求很简单，但很难用谷歌搜索。以下是要求：

  • 我有一个带有图片网址的 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

不知道键盘导航，但我接受的这个类似问题的答案应该会让你明白。

编辑：刚刚意识到它还包括键盘导航。如果您愿意，请查看我如何实现它以供参考（单击作品集选项卡）。

于 2009-09-01T03:33:23.357 回答
0

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

于 2009-09-01T05:08:31.963 回答
0

浏览http://www.designfloat.com/上的一些过去的文章/项目- 有很多优秀的 jQuery 示例可以说明您正在尝试做的事情。

问候，

雷内·皮隆

于 2009-09-01T03:32:13.530 回答