gpt4 book ai didi

.net - 嵌套 jQuery 循环?

转载 作者:行者123 更新时间:2023-12-01 07:03:06 25 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

如果我明白你的想法,这应该可行。要使其看起来正确,您需要做的一件事是使用 overflow:hidden 固定 cycleContent 的宽度和高度。

编辑 我更改了第二个 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>

关于.net - 嵌套 jQuery 循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/557359/

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