jQuery的嵌套循环？ [英] Nested jQuery Cycle?
问题描述
我想建立一个幻灯片，在jQuery的周期插件。
在幻灯片放映有内容，里面的内容有基本的图片库。
该图片库使用周期超时大于内容超时少。 15秒，图片库，以便等待内容将有5图片3为秒Timeout这使得15秒然后将内容更改。
一切听起来不错，但是当我执行该页面时，它循环的内容，第一个图片库。但是，当它跳到第二个内容是不循环的图片库。
我试图把 $（'＃cycleImages'）。周期（{... 这code座图片库中继以上，但它没有工作出去。
我怎样才能获得这些嵌套循环一起工作？
谢谢
＆LT;头=服务器＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/ JS / jQuery的-1.2.6.js的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/ JS / jquery.cycle.all.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃cycleContent'）。周期（{
FX：scrollRight'，
延迟：-1000，
超时：15000
}）;
}）;
$（'＃cycleImages'）。周期（{
外汇：'褪色'，
速度：500，
超时：3000，
暂停：1
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
这是我的HTML标记了
＆LT; DIV ID =cycleContent＆GT;
＆LT; ASP：直放站ID =rptContent=服务器＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; DIV＆GT;
＆LT; H2类=幻灯式＆GT;（Type.Name）％＆GT;＆LT; / H＆GT;
＆LT; H2类=幻灯标题＆GT;（标题）％GT;＆LT; / H＆GT;
＆LT; DIV ID =cycleImages＆GT;
＆LT; ASP：直放站ID =rptBigPictures数据源='＆LT;％＃的eval（图像）％GT;'的EnableViewState =假
=服务器＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：图片ID =imgProfile=服务器的ImageUrl ='＆LT;％＃的eval（路径）+.JPG％GT;' /＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：直放站＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：直放站＆GT;
＆LT; / DIV＆GT;
如果我得到你的概念这应该工作。有一件事你需要做的，使它看起来正确的是有 cycleContent 的固定宽度和高度溢出：隐藏。
修改我改变了第二jQuery选择使用类。因此，标记不再有cycleImages作为ID。因为要重复它，你应该使用一个类来选择元素。
的jQuery（函数（$）{
$（'＃cycleContent'）。周期（{
FX：scrollRight'，
超时：15000
}）;
$（'。cycleImages'）。周期（{
外汇：'褪色'，
速度：500，
超时：3000，
暂停：1
}）;
}）;
我使用的CSS是这样的，注意的宽度和高度都是我的测试图像的大小。
#cycleContent
{
宽度：77px;
高度：94px;
溢出：隐藏;
}
和标记，只所以清晰度。
＆LT; DIV ID =cycleContent＆GT;
＆LT; DIV＆GT;
＆LT; DIV CLASS =cycleImages＆GT;
＆LT; IMG SRC =图像/ 1.JPG/＆GT;＆LT; IMG SRC =图像/ 2.JPG/＆GT;＆LT; IMG SRC =图像/ 3.JPG/＆GT;＆LT; IMG
SRC =图像/ 4.JPG/＆GT;＆LT; IMG SRC =图像/ 5.JPG/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; DIV CLASS =cycleImages＆GT;
＆LT; IMG SRC =图像/ 1.JPG/＆GT;＆LT; IMG SRC =图像/ 2.JPG/＆GT;＆LT; IMG SRC =图像/ 3.JPG/＆GT;＆LT; IMG
SRC =图像/ 4.JPG/＆GT;＆LT; IMG SRC =图像/ 5.JPG/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
I am trying to build a slide show with jQuery cycle plug in.
In the slide show there are contents and inside the contents there is basic image gallery.
Timeout of cycle which image gallery uses is fewer than the contents timeout. So content waits for 15 second and the image gallery will have 5 pics with 3 seconds timeout which makes 15 second then the content changes.
Everything sounds ok but when i execute the page, it cycles the content and the first image gallery. But when it jumps to second content it doesn't cycle the image gallery.
I have tried to put $('#cycleImages').cycle({... this code block above the image gallery repeater but it didnt work out.
How can i get these nested cycles work together? Thank you
<head runat="server">
<script type="text/javascript" src="/Js/jquery-1.2.6.js"></script>
<script src="/Js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cycleContent').cycle({
fx: 'scrollRight',
delay: -1000,
timeout: 15000
});
});
$('#cycleImages').cycle({
fx: 'fade',
speed: 500,
timeout: 3000,
pause: 1
});
</script>
</head>
And this is my html mark up
<div id="cycleContent">
<asp:Repeater ID="rptContent" runat="server">
<ItemTemplate>
<div>
<h2 class="slideShow-type">("Type.Name") %></h2>
<h2 class="slideShow-title">("Title") %></h2>
<div id="cycleImages">
<asp:Repeater ID="rptBigPictures" DataSource='<%#Eval("Images") %>' EnableViewState="false"
runat="server">
<ItemTemplate>
<asp:Image ID="imgProfile" runat="server" ImageUrl='<%#Eval("Path") + ".jpg" %>' />
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
If I'm getting your concept this should work. One thing you will need to do to make it look right is to have a fixed width and height of cycleContent with overflow:hidden.
Edit I changed the second jquery selector to use the class. So the markup no longer has cycleImages as an id. Since you will be repeating it, you should use a class to select the elements.
jQuery(function($) {
$('#cycleContent').cycle({
fx: 'scrollRight',
timeout: 15000
});
$('.cycleImages').cycle({
fx: 'fade',
speed: 500,
timeout: 3000,
pause: 1
});
});
The CSS I'm using is this, note the width and height are the sizes of my test images.
#cycleContent
{
width: 77px;
height: 94px;
overflow: hidden;
}
And the markup, just so for clarity.
<div id="cycleContent">
<div>
<div class="cycleImages">
<img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img
src="images/4.jpg" /><img src="images/5.jpg" />
</div>
</div>
<div>
<div class="cycleImages">
<img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img
src="images/4.jpg" /><img src="images/5.jpg" />
</div>
</div>
</div>
这篇关于jQuery的嵌套循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
