jquery cycle2初始化脚本失败答案

【问题标题】：jquery cycle2 initialisation script failingjquery cycle2初始化脚本失败
【发布时间】：2013-04-05 11:33:59
【问题描述】：

我可以在 div 中使用 jq cycle2 和所有必需的选项 inline，这是现在首选的样式。但我想改用初始化脚本，就像旧的操作方法一样。我只是更喜欢将画廊选项的内容保留在我的标记之外，并尽可能保留在外部 .js 文件中。

我已经使用与“内联”方法完美配合的所有选项制作了脚本，并且它可以正确链接，但这会静默失败，并且幻灯片会恢复到默认的淡入淡出设置，而我指定的是 scrollHorz。

我还使用了上一个/下一个按钮和动画阳离子 - 字幕工作但没有动画，上一个/下一个按钮可见但完全失败。

我的脚本位于名为“functionality.js”的文件中，我相信我已按照“自定义初始化脚本”as outlined in the API 的说明进行操作。我在一个名为“plugins.js”的文件中包含所有相关插件，该文件的链接很好，您会在下面的控制台屏幕截图中看到它们被引用。

请查看以下标记/脚本（为简单起见，它是 cycle2 示例的直接副本）和控制台截屏链接：

<a href="#"><span class="prevControl">Prev</span></a>
<a href="#"><span class="nextControl">Next</span></a>

<div class="cycle-slideshow">
<img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/>
<img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/>
<img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/>
<img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/>

<div class="cycle-caption"></div>
<div class="cycle-overlay"></div>

</div>

链接脚本：

$('.cycle-slideshow').cycle({
fx: scrollHorz,
timeout: 2000,
speed: 700,
prev: ".prevControl",
next: ".nextControl",
caption-plugin: caption2,
overlay-fx-sel: "div"
});

这里是 a screengrab of the console error

的链接

如果有人能提出建议，将不胜感激，我相信这是一个简单的错误！

提前致谢

【问题讨论】：

标签： jquery cycle jquery-cycle

【解决方案1】：

您的 JavaScript 中有一些简单的错误会导致循环失败。当以编程方式初始化幻灯片时，参数需要是驼峰式，而不是像使用数据属性指定时那样使用连字符。您还需要将基于字符串的参数值用引号括起来，否则您的脚本会认为它们是变量。这是您的示例的更新版本：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cycle2 Example</title>
</head>
<body>
    <a href="#"><span class="prevControl">Prev</span></a>
    <a href="#"><span class="nextControl">Next</span></a>

    <div class="slides">
        <img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/>
        <img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/>
        <img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/>
        <img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/>

        <div class="cycle-caption"></div>
        <div class="cycle-overlay"></div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.io/jquery.cycle2.js"></script>
    <script>
        $('.slides').cycle({
            fx: "scrollHorz",
            timeout: 2000,
            speed: 700,
            prev: ".prevControl",
            next: ".nextControl",
            captionPlugin: "caption2",
            overlayFxSel: "div"
        });
    </script>
</body>
</html>

在以编程方式设置幻灯片时，我可能还会使用 cycle-slideshow 以外的 id 或类，这样它就不会被循环插件自动初始化。

【讨论】：

非常感谢@Dylan，这非常有效。我看到你提出的观点，非常感谢你的帮助。

【解决方案2】：

您应该在此页面中包含对字幕插件的引用：

http://www.malsup.com/jquery/cycle2/download/

这里有一个例子：

http://www.malsup.com/jquery/cycle2/demo/caption2.php

【讨论】：

您好，感谢您的回复。我已经在我的“plugins.js”文件中链接到它。我可以使用内联字幕选项（和任何其他选项）使图库正常工作，但不能像旧循环方法那样通过外部脚本。