我正在运行jquery。根据本例使用嵌套循环的循环图库。我遇到的问题是，在页面加载上可见的周期不会自动开始运行。为了让它运行，我必须导航到第二个画廊，然后点击回到第一个画廊。即使这样，图库也会在一个图像之后停止运行，即使集合中有几个图像。
有什么建议吗?这件事的最后期限到了，但我盯着它看了好几天，却卡住了。
<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>
EDIT解决了!我意识到问题是这个脚本是专门设置的，所以所有的画廊在页面加载时都停止了。在浏览了Jquery之后。循环选项，我想出了这个解决方案:
$(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();
}
});
});
此脚本在页面加载时启动所有图库，当通过分页器选择新图库时，所选图库将重置为其第一张幻灯片。可能有一种更优雅的方法来处理这个问题，但它是有效的!
您的<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");
}
至少您必须做以下操作才能使子循环在加载时开始:
从子周期实例化调用中删除'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不是有效的标记。