我根据this example.使用嵌套循环运行jquery.cycle库我遇到的问题是页面加载时可见的循环不会自动开始运行。为了让它运行，我必须导航到第二个库，然后单击返回第一个库。即使这样，即使在集合中有多个图像，图库也只在一个图像后停止运行。
有什么建议吗？我正处于这个事情的最后期限，但在盯着它好几天之后我就被困住了。
<script type="text/javascript">
$(document).ready(function() {
var gLength = $('#hovergal > ul').size();
if( gLength > 1)
{
//move over gallery to allow room for nav
$('#hovergal').css("marginLeft","100px");
//stop subgal initially
$('#hovergal .subgal').cycle({
fx: 'fade',
timeout: 10000,
slideExpr: 'li'
}).cycle('pause');
//start subgal on click
$('#hovergal').cycle({
fx: 'scrollUp',
speed: 300,
timeout: 0,
slideExpr: '>ul.subgal',
pager: 1,
pagerAnchorBuilder: function(i) {
return $('aside.sgnav a:eq(' + i + ')');
},
after: function(curr,next,opts) {
var cmd = opts.currSlide == 1 ? 'resume' : 'pause';
$('ul.subgal').cycle(cmd);
}
});
} else {//else, if there's only one gallery to be shown
$('#hovergal .subgal').cycle({
fx: 'fade',
timeout: 3000,
slideExpr: 'li',
});
};
$('.sgcaption').each(function() {
if ($(this).contents().length == 0){
$(this).hide();
}
});
});
</script>
<div id="hovergal">
<ul class="subgal">
<li><a href="Quality Printers features the work of the ArtFuse Collective."><img src="http://localhost/qp/images/83.jpg" rel="http://localhost/qp/images/83t.jpg" title="Quality Printers features the work of the ArtFuse Collective." /></a>
<span class="sgcaption">Quality Printers features the work of the ArtFuse Collective.</span></li>
<li><a href="Quality Printers features the work of the ArtFuse Collective."><img src="http://localhost/qp/images/84.jpg" rel="http://localhost/qp/images/84t.jpg" title="Quality Printers features the work of the ArtFuse Collective." /></a>
<span class="sgcaption">Quality Printers features the work of the ArtFuse Collective.</span></li>
</ul>
<ul class="subgal">
<li><a href="Events hosted at Quality Printers have attracted upward of 70 attendees."><img src="http://localhost/qp/images/78.jpg" rel="http://localhost/qp/images/78t.jpg" title="Events hosted at Quality Printers have attracted upward of 70 attendees." /></a>
<span class="sgcaption">Events hosted at Quality Printers have attracted upward of 70 attendees.</span></li>
<li><a href="We the Gentlemen Performs in our Creative Cultural Center"><img src="http://localhost/qp/images/79.jpg" rel="http://localhost/qp/images/79t.jpg" title="We the Gentlemen Performs in our Creative Cultural Center" /></a>
<span class="sgcaption">We the Gentlemen Performs in our Creative Cultural Center</span></li>
<li><a href="We the Gentlemen Performs in our Creative Cultural Center"><img src="http://localhost/qp/images/80.jpg" rel="http://localhost/qp/images/80t.jpg" title="We the Gentlemen Performs in our Creative Cultural Center" /></a>
<span class="sgcaption">We the Gentlemen Performs in our Creative Cultural Center</span></li>
<li><a href="Events hosted at Quality Printers have attracted upward of 70 attendees."><img src="http://localhost/qp/images/81.jpg" rel="http://localhost/qp/images/81t.jpg" title="Events hosted at Quality Printers have attracted upward of 70 attendees." /></a>
<span class="sgcaption">Events hosted at Quality Printers have attracted upward of 70 attendees.</span></li> </ul>
</div>
<aside class="sgnav right">
<a class="rounded" href="#">Current</a>
<a class="rounded" href="#">Past</a>
</aside>
编辑解决了！我意识到问题是脚本是专门设置的，所以所有的画廊都在页面加载时停止了。在查看了Jquery.Cycle选项之后，我想出了这个解决方案：
$(document).ready(function() {
var gLength = $('#hovergal > ul').size();
if( gLength > 1)
{
//move over gallery to allow room for nav
$('#hovergal').css("marginLeft","100px");
//stop subgal initially
$('#hovergal .subgal').cycle({
fx: 'fade',
timeout: 10000,
slideExpr: 'li'
}).cycle();
//start subgal on click
$('#hovergal').cycle({
fx: 'scrollUp',
speed: 300,
timeout: 0,
slideExpr: '>ul.subgal',
pager: 1,
pagerAnchorBuilder: function(i) {
return $('aside.sgnav a:eq(' + i + ')');
},
before: function(curr,next,opts) {
$('ul.subgal').cycle({startingSlide:0});
}
});
} else {//else, if there's only one gallery to be shown
$('#hovergal .subgal').cycle({
fx: 'fade',
timeout: 3000,
slideExpr: 'li',
});
};
$('.sgcaption').each(function() {
if ($(this).contents().length == 0){
$(this).hide();
}
});
});
此脚本在页面加载时启动所有图库，当通过寻呼机选择新图库时，所选图库将重置为其第一张幻灯片。可能有更优雅的方式来处理这个问题，但它确实有效！
答案 0 :(得分：0)
您的<ul>元素都在最后一个列表项之前结束：
</ul>
<span class="sgcaption">Quality Printers features the work of the ArtFuse Collective.</span></li>
这使它有效。该示例仅在主循环中嵌套了一个循环，因此检查opts.currSlide以查看它是否处于活动状态。它会在切换到0或2时暂停，但在currSlide为1时恢复。当你在代码中改变到第二个循环时，它会启动，但当你改回来时，它只会显示当前的剩余部分动画再次暂停。
after: function(curr, next, opts) {
$(curr).cycle("pause");
$(next).cycle("resume");
}
答案 1 :(得分：0)
至少，您必须执行以下操作才能使子循环开始加载：
从子循环实例化调用中删除'pause'命令。
$('#hovergal .subgal').cycle({
fx: 'fade',
timeout: 10000,
slideExpr: 'li'
}); // removed .cycle('pause')
删除'after'回调函数。它暂停你的子循环。您的新主循环调用应如下所示：
$('#hovergal').cycle({
fx: 'scrollUp',
speed: 300,
timeout: 0,
slideExpr: '>ul.subgal',
pager: 1,
pagerAnchorBuilder: function (i) {
return $('aside.sgnav a:eq(' + i + ')');
}
});
此外，您的HTML无效标记。你可能想花一些时间来清理它。