我有以下html:
<a href="#" id="#1" class="pagerlink" >link</a>
<a href="#" id="#3" class="pagerlink" >link</a>
<a href="#" id="#2" class="pagerlink" >link</a>
/*etc.... */
和以下jQuery脚本:
$(document).ready(function() {
var $container = $('.gallery_r').cycle({
fx: 'scrollHorz',
speed: 500,
timeout: 0
});
$('a.pagerlink').click(function() {
var id = $(this).attr('id');
$container.cycle(id);
return false;
});
});
'pagerlink'链接控件是jQuery Cycle幻灯片.如果我交换这一行:
$container.cycle(id);
为了这
$container.cycle(7);
它的工作原理......(显然只能导航到7号幻灯片).所以,我的问题是如何获取被点击链接的ID并将其传递到该行？
提前致谢!
我在一些div上使用循环插件,如下所示:
<div class="sections">
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
</div>
所有.section div都有可变高度,基于它们的内容.如何使循环不将容器div(节)调整到最大子高度？相反,我希望容器在每个动画上调整大小到当前子高度.
我使用jQuery循环创建了一个响应式图像滑块.
我使用的以下设置工作正常,除了包含.cyclediv没有正确清除,使其后面的任何内容坐在它下面.
这是因为div是相对的,它的孩子是绝对的.
$('.cycle').cycle({
slideResize: true,
containerResize: false,
fit: 1,
width: "fit"
});
我的问题是,如何在.cycle没有固定高度或使用某些事件繁重的JavaScript的情况下清除响应式div？
这是我在jsfiddle上的代码:http://jsfiddle.net/blowsie/HuNfz/19/
更新:
我写了一些代码来修复循环的高度,它按预期工作(虽然它有时会出错),但它的事件很重,而且不是很光滑.
我喜欢看到可以在纯CSS中完成或者在循环设置中进行更改.
我目前正在使用jQuery.Cycle循环遍历一些子<div>标签.但是,我想要默认循环fx fade,当我单击next或prev选择器时,我希望循环fx暂时更改为scrollRight或scrollLeft取决于单击的选择器.
这可能吗？
jQuery代码,如有必要:
$('#banner_content').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 6500,
speed: 2000,
next: $("#right_arrow a"),
prev: $("#left_arrow a"),
});
我正在使用jQuery Cycle插件.有问题的页面在这里:
http://harrisonfjord.com/folio/test.html
左侧的菜单使用Cycle插件控制页面中间的内容.非常直截了当.但是,循环是在幻灯片框中添加了一堆样式:
<div class="adSlideBox" id="asics" style="position: absolute; z-index: 8; top: 0px; left: 0px; display: block; width: 1020px; opacity: 1; ">
有问题的违规代码是width正在设置的属性; 我正在基于流畅的布局构建网站,并且图像意味着在调整窗口大小时调整大小.一切正常,直到Cycle为我的每张幻灯片添加了令人讨厌的宽度规则!
我怎么能让它停止这样做？我containerResize: 0,试图使用但无济于事.这是jQuery调用:
$('#adSlideshow').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#menu',
containerResize: 0,
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '#menu li:eq(' + idx + ') a';
}
});
我顺便使用完整版的Cycle,所以切换containerResize选项应该工作但不行.思考？
是否有可能进入cycle.js代码并将这部分函数撕掉？
编辑:忽略右侧菜单在调整页面大小时表现奇怪的事实,它实际上意味着坐在底部,但为了简单起见,我在这个测试站点中编辑了其余的代码.
嘿伙计们,我正在为图片库运行jQuery Cycle.查看链接:这里
我的问题是在Firefox中查看图像时会被压扁.重新加载页面时问题消失了.这让我相信在加载所有图像之前Javascript正在触发(通常第一个图像工作正常,其余图像被压扁.)
难以重新解决问题.
我把所有内容都包装在$(document).ready(function(){})中; 但它仍然会发生.
附加信息:如果我指定图像的宽度和高度,一切正常.然而,有数百个图像都有不同的大小..
我对这个问题非常沮丧.任何想法/帮助非常感谢!
这是我的代码:
$(document).ready(function(){
//function onBefore(curr,next,opts) {
// var $slide = jQuery(next);
// var w = $slide.outerWidth();
// var h = $slide.outerHeight();
// $slide.css({
// marginTop: (482 - h) / 2,
// marginLeft: (560 - w) / 2
// });
//};
// Decare the function that center the images...
function onBefore(curr,next,opts) {
var $slide = jQuery(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (480 - h) / 2,
marginLeft: …我是一个大风扇的jQuery插件周期尚未它会很酷,如果它有类似的一些更复杂的过渡效果NIVO滑块或jqFancyTransistions.
我明白了如何创建与jQuery周期自定义效果的JIST,但我有一个困难时期试图找出如何创建一个类似于NIVO滑块和jqfancytransitions或者如果可能的话在jQuery的周期条过渡效果.任何有关这方面的帮助将不胜感激.谢谢!
我有一个malsup的真棒jQuery循环运行的页面.我使用的是最新版本(2.99)和Safari 5.0.5.我以前没有遇到过以下问题,看起来有点奇怪.
问题
有时,当页面加载时,.slides元素只有654像素宽.我把它设置为css文件中的960px.但是,当我使用JavaScript来获取.slides元素的宽度时,它表示宽度为1271px.咦？这个问题偶尔会出现在Firefox(3.6.16)上,但没有Safari那么近.奇怪的是,我似乎无法在IE8中复制此错误.
我的代码都是W3C有效(除了3次调用border-radius).使用表单元素作为循环容器可能存在限制吗？Safari是否存在误操作？
JS:
$(document).ready(function(){
var sw = $('.slides').width();
$('.slides').cycle({
fx: 'scrollHorz',
nowrap: 0,
fit: 1,
timeout: 0,
next: '.next',
prev: '.prev',
speed: 250
});
if (sw != 960){
$('.slides').css('width','960px');//to set the width to 960, so it doesn't clip the form
$('.slides').css('background-color','#ff00ff');//so i know when the problem is occuring
}
});
CSS:
#content{
float:left;
width:100%;
}
.wrapme{
width:960px;
height:auto;
margin:0 auto;
}
.slides{
float:left;
width:960px;
height:auto;
overflow:auto;
}
你可以(希望)在这里看到"bug" .我很想知道其他人是否没有这样做(可能需要多次推F5).
我很想解决这个烦人的小虫子.在循环之后设置容器宽度的解决方法已经调整它(错误的宽度,毫无疑问)只能解决问题的一半.移动到下一张幻灯片后,它会将宽度减半.下一张幻灯片,它再次将它减半.因此,在幻灯片3之后,它将所有内容调整到240px宽.
我想解决这个问题的方法是强制每个人都使用Firefox/IE(它将驻留在公司内部网上). …
我正在尝试使用优秀的Cycle 2 jQuery插件设置响应式图像库.画廊将展出肖像和风景图像.
我使用的是Centered Slides选项(Cycle2的中心插件:http://jquery.malsup.com/cycle2/demo/center.php),这似乎导致Webkit浏览器出现问题(尝试调整浏览器窗口大小,如果这不是'一开始很明显!)
绿色背景代表循环容器.
如果没有添加中心选项(data-cycle-center-horz = true data-cycle-center-vert = true),整个过程运行良好,请参阅:
我无法弄清楚导致中心版本问题的原因.
图像上的CSS代码非常小:
.cycle-slideshow img {
max-height: 100%;
max-width: 100%;
}
包含元素的CSS就在这里
.cycle-slideshow {
background: green;
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin:20px auto;
padding:0;
width:80%;
}
非常感谢您的帮助!
我正在尝试设置幻灯片,以使用数据属性在每张幻灯片上设置超时.这适用于jQuery Cycle,但不适用于jQuery Cycle 2.我想我可能使用了错误的功能,但在Cycle 2文档中没有找到类似的东西？
HTML:
<div id="slides">
<img src="img1.jpg" data-duration="1000" />
<img src="img2.jpg" data-duration="2000" />
<img src="img3.jpg" data-duration="3000" />
</div>
JS:
$('#slides').cycle({
fx: 'fadeout',
speed: 250,
timeoutFn: function(currElement, nextElement, opts, isForward) {
return parseInt($(currElement).attr('data-duration'), 10);
}
});