用于从图像 url 制作幻灯片的 jquery 插件答案

【问题标题】：jquery plugin for making a slideshow from image urls用于从图像 url 制作幻灯片的 jquery 插件
【发布时间】：2010-11-24 12:36:53
【问题描述】：

请求很简单，但很难通过 Google 搜索。以下是要求：

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

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

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

【问题讨论】：

具体要求可以自己写，应该不会太难。
你不能根据插件要求修改输出吗？即将 o/p 从数组转换为插件使用的任何内容。
是的，我想这就是我必须要做的。我希望有一个简单的方法，它已经为我完成了，但我想修改一个写得很好的幻灯片会比一起破解更好
第一步不应该是“这个插件在哪里？” - 第一步应该考虑你正在构建什么。结合一点 jQuery 知识，你会得到完全你想要的输出。
在一个理想的世界里，我同意安迪，但有时它只是为了完成工作。

标签： jquery ajax plugins slideshow

【解决方案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();
};

【讨论】：

哇。超越的方式。
我怀疑它是否真的实用，但我只是想激发一些动力 - 学习这些东西并理解结构和完整性而不是仅仅假设插件是正确的路线是件好事。我见过无数的可怕插件。他只需要评估问题并解决他的需求。如果太复杂，那么 jQuery Cycle 可能是他最好的选择，否则，自己构建它会是一个很好的体验。祝你好运。
嘿，谢谢你写这篇文章。代码很好！更重要的是，它会很容易建立，因为我需要更多的东西。非常感谢。生病发送一些代表你的方式

【解决方案2】：

不知道键盘导航，但我接受this similar question 的回答应该可以解决您的问题。

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

【讨论】：

【解决方案3】：

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

问候，

雷内·皮隆

【讨论】：

【解决方案4】：

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

【讨论】：