gpt4 book ai didi

javascript - Jquery Cycle2 插件不工作

转载 作者:行者123 更新时间:2023-12-03 06:41:35 26 4
gpt4 key购买 nike

我在使 jquery Cycle2 插件正常工作时遇到问题。

无法加载幻灯片和图像。它们只是出现在彼此下方。我没有看到任何控制台错误。我有最新的jquery(3.0)。

这是我的代码。顺便说一下,我对 javascript 和 jquery 比较陌生:

$('document').ready(function($) {
$('#slideshow').cycle({
timeout: 0, // no autoplay
fx: 'fade', //
next: '#next',
prev: '#prev'
});
});
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/assets/scripts/jquery.min.js"></script>

<!-- Cycle2 -->
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/assets/scripts/jquery.cycle2.min.js"></script>

</head>

<div id="slideshow">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;">
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>

我不知道为什么这不起作用。因为这是以前有人举过的例子。顺便说一句,我正在使用 wordpress。它在 Chrome 和 Firefox 中都不起作用。

最佳答案

这是因为您没有指定需要循环浏览哪个子 HTML 元素。请将 data-cycle-slides="> div" 添加到您的标记中。

Documentation :

Cycle2 allows you to use any type of element for the slides, it's not solely for cycling images. However, images are the default slide type so to use other elements you need to override the slides option as show on this page. The slides option can be set to any valid jQuery selector. The default value is > img which is a selector to find all image elements that are immediate children of the slideshow container.

fiddle :https://jsfiddle.net/codeandcloud/tf24noy6/

片段

<!DOCTYPE html>
<html>
<head>
<title>Cycle2 Plugin - Malsup by codeandcloud</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<title>Cycle2 Plugin - Malsup by codeandcloud</title>
<script type='text/javascript'>
//<![CDATA[

$('document').ready(function ($) {
$('#slideshow').cycle({
timeout: 0, // no autoplay
fx: 'fade', //
next: '#next',
prev: '#prev'
});
});

//]]>
</script>
</head>
<body>
<div style="width: 250px">
<div id="slideshow" data-cycle-slides="> div">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;"></div>
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
</div>
</body>
</html>

关于javascript - Jquery Cycle2 插件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37934426/

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