jQuery Cycle —多个嵌套幻灯片和循环终止 [英] Jquery Cycle —multiple nested slideshows and cycle terminating
问题描述
我正在尝试使用jQuery Cycle插件构建幻灯片，其中包含一些顶级幻灯片中的另一级嵌套幻灯片.
I am trying to build a slideshow using the jQuery Cycle plugin that contains another level of nested slideshows within some of the top-level slides.
主容器"幻灯片水平滑动，然后(对于左侧包含多个图像的容器"幻灯片)，这些图像垂直向上滑动.
The main "container" slides slide horizontally, and then—for "container" slides that contain more than one image on the left-hand side—those images slide up vertically.
这里是示例，因为我想很难形象化: http://dl.dropbox.com/u/2890872/js-test /index.html
Sample here, because I imagine it's hard to visualize: http://dl.dropbox.com/u/2890872/js-test/index.html
您只会在停下来的第二张顶层幻灯片上，甚至认为有六张顶层幻灯片(这是我的问题，第二张幻灯片仅包含一个左手内部图像，这会停止脚本) )，但您可以查看预期的转换是什么，并查看完整的代码.
You'll only get to the second top-level slide before it stops, even thought there are six top-level slides (which is my issue—the second slide only contains one left-hand inner image, which stops the script), but you can see what the intended transitions are and check out the entire code.
问题在于，并非所有辅助幻灯片都具有多个图像，并且如果幻灯片中包含一个或更少图像，则jQuery Cycle会自行终止.此终止还终止了顶级幻灯片放映，因为它是根据辅助幻灯片放映的结束时间而停止和启动的.由于辅助幻灯片仅由于一个幻灯片"而终止，因此永远不会调用下一个外部顶级幻灯片.我不确定如何修改代码来解决此问题.
The problem is that not all of the secondary slideshows have more than one image, and jQuery Cycle terminates itself if there is one or less images in a slideshow. This termination also terminates the top-level slideshow, since it is stopped and started based on when the secondary slideshow ends. Since the secondary slideshow terminates due to only one "slide", then the next outer top-level slide never gets called. I'm not sure how to adapt the code to get around this.
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处终止. 我尝试从没有内部幻灯片放映的幻灯片中删除嵌套和向上滑动"类，但这无济于事.
The slideshow terminates at the second #home-slides > div because there is only one image. I've tried removing the nesting and the "slide-up" class from the slides with no inner-slideshow, but that doesn't help.
可在此处再次找到具有所有相关代码的完整工作版本: http://dl.dropbox.com/u/2890872/js-test/index.html
Again, full working version with all relevant code can be found here: http://dl.dropbox.com/u/2890872/js-test/index.html
-----------编辑4/10-次要更新，可能还有潜在客户----------
我在此处和示例链接上编辑了代码，仅添加了一些细节，以消除故障排除的最初想法.现在，只有具有辅助幻灯片放映功能的幻灯片才使用"slide-up"类.
-我尝试在函数中为结束"回调('$(this).children('.slide-up').cycle ...')指定'.slide-up'类，这确实可以防止循环终止过多的幻灯片，但这只会使它终止于无与伦比的元素！
I've edited the code here and on the example link just to add some details that elmininate the first thoughts for troubleshooting. Now, only the the slides with secondary slideshows use the class "slide-up".
- I've tried specifying the '.slide-up' class in the function for the "end" callback ('$(this).children('.slide-up').cycle…'), which does prevent cycle from terminating for too few slides, but that only makes it terminate for unmatched elements!
我得到的最接近的方法是在结束回调中向函数添加条件检查: (我正在使用长度来检查是否有向上滑动的div.如果有更好的方法，请告诉我)
The closest I've gotten is by adding a conditional check to the function in the end callback: (I'm using length to check the existence of a slide-up div. If there's a better way, let me know)
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中的所有错误和终止，但是主幻灯片仍然在没有辅助幻灯片的情况下停在幻灯片上.我认为需要在"else"语句中添加一些与启动"slideshow.cycle('next');"有关的内容，但是我还没有弄清楚使它正常工作的正确语法.
This eliminates all errors and terminations directly from jQuery Cycle, but the main slideshow still stops at the slide without a secondary slideshow. I think need to put something in the "else" statement related to firing up "slideshow.cycle('next');", but I haven't figured out the proper syntax to get that to work.
-----------编辑#2 4/10-----------
最近的工作示例: http://dl.dropbox.com /u/2890872/js-test/index2.html
将before函数移至其自己的命名函数中，以保持环境整洁.
Moving the before function into its own named function to keep things cleaner.
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'); }
});
}
此(其他语句)允许幻灯片进行，但不保留原始的幻灯片"选项，而只是使用默认的即用型选项(从一个淡入淡出)开始播放顶级幻灯片滑动到下一个，而不是滑动，停止播放辅助幻灯片.
This (else statement) allows the slideshow to progress, but it doesn't preserve the original 'slideshow' options, and just starts playing the top-level slides with default out-of-the-box options (fades from one slide to the next, instead of sliding, stops playing secondary slides).
我不明白: 1)如何保留选项. (我认为这就是为什么首先创建var"slideshow"的原因)
I don't understand: 1) How to preserve the options. (I thought that was why the var "slideshow" was created in the first place)
2)为什么还要使用else语句-我不明白为什么在不执行条件'.slide-up'语句时外部幻灯片完全停止播放-我认为外部幻灯片将继续播放像往常一样.
2) Why an else statement is even necessary—I don't understand why the outer slides are stopping at all when the conditional '.slide-up' statement isn't executed— I would think the outer slideshow would just continue as normal.
推荐答案
一个Facebook朋友解决了它！谢谢，Facebook朋友！
A facebook friend solved it! Thanks, facebook friend!
var slideshow = $('#home-slides').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0,
before: function(curElement, nextElement, options, forwardFlag) {
if($(nextElement).children('.slide-up').length != 0) {
$(nextElement).children('.slide-up').cycle({
fx: 'scrollUp',
timeout: 2000,
autostop: true,
end: function() { slideshow.cycle('next'); }
});
}
else {
setTimeout(function(){ slideshow.cycle('next'); }, 2000);
}
}
});
此处的示例: http://dl.dropbox.com/u/2890872/js-test/index3.html 我需要更多地研究Cycle和他所做的更改，以完全理解'nextElement'在此代码中的作用，但它肯定可以工作！
Working example here: http://dl.dropbox.com/u/2890872/js-test/index3.html I need to study Cycle a bit more and the changes he's made to fully understand the role of 'nextElement' in this code, but it most certainly works!
这篇关于jQuery Cycle —多个嵌套幻灯片和循环终止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
