1

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

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

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

我的脚本位于名为“functionality.js”的文件中，我相信我已按照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"
});

这是控制台错误的屏幕截图的链接

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

提前致谢

4

2 回答 2

2

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 或类，这样它就不会被循环插件自动初始化。

于 2013-07-10T10:05:57.930 回答
1

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

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

一个示例位于此处：

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

于 2013-04-09T16:59:11.253 回答