Question

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

我已经使用所有与'inline'方法完美配合的选项制作了脚本并且链接正确，但是这会无声地失败并且幻灯片显示恢复为淡入淡出的默认设置，而我指定了scrollHorz。

此外，我正在使用上一个/下一个按钮和动画阳台 - 字幕可以工作，但没有动画，上一个/下一个按钮可见，但完全失败。

我的脚本位于名为“functional.js”的文件中，我相信我已按照“自定义初始化脚本”as outlined in the API的说明进行操作。我在一个名为'plugins.js'的文件中有所有相关的插件，链接得很好，你会在下面的控制台screengrab中看到它们。

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

<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

的链接

如果有人可以提出建议，我将非常感激，我确信这是一个简单的错误！

提前致谢

Answer 1

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

<!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或类，以便循环插件不会自动初始化它。

Answer 2

您应该在此页面中添加对标题插件的引用：

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

一个例子就在这里：

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

jquery cycle2初始化脚本失败

2 个答案: