gpt4 book ai didi

jquery Cycle2 初始化脚本失败

转载 作者:行者123 更新时间:2023-12-01 08:07:05 26 4
gpt4 key购买 nike

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

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

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

我的脚本位于名为“功能性.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 的链接

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

提前致谢

最佳答案

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

关于jquery Cycle2 初始化脚本失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15832890/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com