- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在使 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"
添加到您的标记中。
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/
发生这种情况是否有特定原因,或者可能有很多不同的原因?我不知道为什么我的程序打印出它正在打印的值,因为我希望它打印出整数。相反,我得到了这个: 周期@173a10f循环@a62fc3循环@a62fc3
长期读者,第一次发帖。 :) 我正在使用 jQuery Cycle 插件,可以在此处下载:http://jquery.malsup.com/cycle/ 我在帖子部分工作得很好,但是收到了一个请求,要
我正在使用 Malsup 的 Cycle() JQuery 插件,并尝试让它显示图库中的图像、缩略图列表以及每个缩略图下的标题。我的代码如下:
我在页面上使用jQuery Cycle(完整)插件,在该页面上使用宽度为75%的容器DIV(.content-left),并且在该容器内部使用jQuery Cycle幻灯片放映。该容器内的图像应自动调
我正在尝试使用 AFNetworking2.6.3 的 UIImageView 扩展从远程服务器获取图像。一切正常,图像已返回并成功渲染。但我在 Xcode7.3.1 中收到保留周期警告:在此 blo
我收到以下错误: [循环]终止;幻灯片太少:1 下面是 jQuery Cycle 的代码。我不知道为什么 Chrome 中会出现这个 var inners = $('ul#output li').cy
看来我已经超越了自己。一直以来,我都在创建这个漂亮的“最新消息”小部件,它会在鼠标悬停在每个 anchor 上时消失。然后我的同事说,“嘿,克里斯,这些链接不起作用” ...糟糕。我想知道我是否可以让
我可能在尝试一些愚蠢的事情,但我有一个足够大的 非-onionified Cycle.js 应用程序,我正在尝试学习如何 onionify可行,所以我想将一个 onionified 组件嵌入到我原来的
我必须检查 jQuery Cycle 幻灯片是否终止。我需要检查一下,因为我有多个幻灯片,我按顺序运行它,但是,当出现日志“[cycle] termination;too少幻灯片:1”时,因为幻灯片只
我构建了一个图像 slider ,旨在通过淡入和淡出在四个图像之间进行转换。我使用了 J Query 插件“Cycle”并将效果设置为“淡入淡出”。我还希望让用户能够通过将光标悬停在图像上来暂停幻灯片
我在我的程序中实现了这个伪代码来检查有向图是否是非循环的: L ← Empty list that will contain the sorted elements S ← Set of all no
我有时读到有些指令需要的时间少于一个时钟周期——这怎么可能?或者这就是流水线和乱序进入游戏时的值(value)? 最佳答案 来自 http://en.wikibooks.org/wiki/Microp
我需要能够通过程序循环我的 linksys 路由器,我想这样做的原因很复杂,所以让我们假设没有更好的选择。 有没有办法做到这一点?我认为这是因为当我通过管理控制台向路由器安装固件更新时,它会循环路由器
(我使用 OCaml 版本 4.02.3) 我定义了一个类型 self # type self = Self of self;; type self = Self of self 及其实例 s # l
我有相对较小(40-80 个节点)三次(3-正则)平面图,我必须确定它们的哈密顿性。我知道这个任务是 NP 完全的,但我希望渐近指数时间算法对于我感兴趣的图大小来说仍然非常快。 最佳答案 40 个节点
如何使用具有三个值的 {cycle}?这段代码有什么问题: value value1 最佳答案 我认为你需要给它们起唯一的名字: {cycle name='
我目前正在使用 jQuery.Cycle 来循环几个子项 标签。但是,我希望默认的周期 fx 为 fade ,当我点击next时或prev选择器,我希望循环效果暂时更改为 scrollRight或sc
我的 jQuery.cycle 插件有问题。第一次加载页面时(当未缓存图像时),它显示小图像,例如缩略图。您可以在(编辑:抱歉,旧链接)看到它 - 只需等待第二张图片显示即可 - 它很小。重新加载/刷
我正在使用循环插件并且它运行良好。但是 slider 一直在滑动,我不知道应该使用什么选项来防止它自动播放。 $('#thumbs').cycle({ fx: 'scrollH
我使用循环构建了一个播放器,可以循环播放各种宣传片,但我想为每个页面(1、2、3 等除外)定义特定的描述性寻呼机链接。我知道这应该是可能的,但不知道如何实现...即使我在寻呼机 div 中添加了元素,
我是一名优秀的程序员,十分优秀!