Bar*_*Alp 1 .net asp.net jquery cycle
我正在尝试使用jQuery循环插件构建幻灯片放映.
在幻灯片放映中有内容,内容内有基本图库.
图库使用的周期超时少于内容超时.所以内容等待15秒,图像库将有5个图片,3秒超时,然后15秒,然后内容更改.
一切听起来都不错但是当我执行页面时,它会循环内容和第一个图库.但当它跳转到第二个内容时,它不会循环图像库.
我试图$('#cycleImages').cycle({...将此代码块放在图库转发器上方,但它没有成功.
如何让这些嵌套循环一起工作？谢谢
<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>
这是我的html标记
<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>
如果我得到你的概念,这应该工作.有一件事你需要做的,使它看起来正确的是有一个固定的宽度和高度cycleContent与overflow:hidden.
编辑我更改了第二个jquery选择器以使用该类.因此标记不再具有cycleImages作为id.由于您将重复它,您应该使用类来选择元素.
jQuery(function($) {
$('#cycleContent').cycle({
fx: 'scrollRight',
timeout: 15000
});
$('.cycleImages').cycle({
fx: 'fade',
speed: 500,
timeout: 3000,
pause: 1
});
});
我正在使用的CSS就是这样,注意宽度和高度是我的测试图像的大小.
#cycleContent
{
width: 77px;
height: 94px;
overflow: hidden;
}
标记,只是为了清晰.
<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>