我正在尝试使用 jQuery Cycle 插件构建一个幻灯片，该插件在一些顶级幻灯片中包含另一层嵌套幻灯片。
主“容器”幻灯片水平滑动，然后，对于左侧包含多个图像的“容器”幻灯片，这些图像垂直向上滑动。
此处示例，因为我认为很难想象：http://dl.dropbox.com/u/2890872/js-test/index.html http://dl.dropbox.com/u/2890872/js-test/index.html
即使有六张顶级幻灯片（这是我的问题 - 第二张幻灯片仅包含一张左侧内部图像，它会停止脚本），您也只能在第二张顶级幻灯片停止之前到达它，但是您可以看到预期的转换是什么并查看整个代码。
问题在于，并非所有辅助幻灯片都具有多个图像，如果幻灯片中只有一张或更少的图像，jQuery Cycle 会自行终止。此终止还会终止顶级幻灯片，因为它是根据辅助幻灯片结束的时间停止和启动的。由于辅助幻灯片仅因一张“幻灯片”而终止，因此下一张外部顶级幻灯片永远不会被调用。我不确定如何调整代码来解决这个问题。
The js:
<script type="text/javascript">
$(function(){
// init and stop the inner slideshows
var inners = $('.slide-up').cycle().cycle('stop');
var slideshow = $('#home-slides').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0,
before: function() {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).children().cycle({
fx: 'scrollUp',
timeout: 2000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
}
});
});
</script>
html 的示例：
<div id="home-slides">
<div>
<div class="slide-up">
<img src="i/home/slideshow/1l-1.jpg" alt="" width="284" height="420" />
<img src="i/home/slideshow/1l-2.jpg" alt="" width="284" height="420" />
<img src="i/home/slideshow/1l-3.jpg" alt="" width="284" height="420" />
</div>
<img src="i/home/slideshow/1r.png" alt="" width="291" height="420" />
</div>
<div>
<div>
<img src="i/home/slideshow/2l-1.jpg" alt="" width="284" height="420" />
</div>
<img src="i/home/slideshow/2r.jpg" alt="" width="291" height="420" />
</div>
<div>
<div class="slide-up">
<img src="i/home/slideshow/3l-1.jpg" alt="" width="284" height="420" />
<img src="i/home/slideshow/3l-2.jpg" alt="" width="284" height="420" />
</div>
<img src="i/home/slideshow/3r.png" alt="" width="291" height="420" />
</div>
<div>
…additional slides…
</div>
</div>
幻灯片在第二个 #home-slides > div 处终止，因为只有一张图像。
我尝试从没有内部幻灯片放映的幻灯片中删除嵌套和“幻灯片向上”类，但这没有帮助。
同样，可以在这里找到包含所有相关代码的完整工作版本：http://dl.dropbox.com/u/2890872/js-test/index.html http://dl.dropbox.com/u/2890872/js-test/index.html
----------- 已编辑 4/10 - 小更新和可能的线索 ----------
我编辑了此处和示例链接上的代码，只是为了添加一些详细信息，以消除故障排除的第一个想法。现在，只有带有辅助幻灯片的幻灯片使用“幻灯片”类。
- 我尝试在函数中为“end”回调指定“.slide-up”类（'$(this).children('.slide-up').cycle…'），这确实可以防止循环因幻灯片太少而终止，但这只会使其因不匹配的元素而终止！
我得到的最接近的是在最终回调中向函数添加条件检查：
（我使用 length 来检查上滑 div 是否存在。如果有更好的方法，请告诉我）
before: function() {
if ( $(this).children('.slide-up').length != 0 ) {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).children('.slide-up').cycle({
fx: 'scrollUp',
timeout: 2000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
} else alert('NO INNER SLIDESHOW!');
这消除了直接来自 jQuery Cycle 的所有错误和终止，但主幻灯片仍然停在没有辅助幻灯片的幻灯片上。我认为需要在与启动“slideshow.cycle('next');”相关的“else”语句中添加一些内容，但我还没有找到正确的语法来使其工作。
----------- 编辑 #2 4/10 - ----------
最近的工作示例：http://dl.dropbox.com/u/2890872/js-test/index2.html http://dl.dropbox.com/u/2890872/js-test/index2.html
将 before 函数移至其自己的命名函数中以保持简洁。
function onBefore(currSlideElement, nextSlideElement, options, forwardFlag) {
if ( $(this).children('.slide-up').length != 0 ) {
// stop all inner slideshows
//inners.cycle('stop');
// start the new slide's slideshow
$(this).children('.slide-up').cycle({
fx: 'scrollUp',
timeout: 2000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
}
// else null;
else $(this).parent().cycle({
end: function() { slideshow.cycle('next'); }
});
}
此（else 语句）允许幻灯片放映继续进行，但它不会保留原始的“幻灯片放映”选项，而只是开始使用默认的开箱即用选项播放顶级幻灯片（从一张幻灯片淡出到另一张幻灯片）接下来，不再滑动，而是停止播放辅助幻灯片）。
我不明白：
1）如何保留选项。 （我认为这就是为什么首先创建 var“幻灯片”的原因）
2）为什么 else 语句甚至是必要的 - 我不明白为什么当条件“.slide-up”语句未执行时外部幻灯片完全停止 - 我认为外部幻灯片会正常继续。
