Jquery循环 – 多个嵌套幻灯片和循环终止
我正在尝试使用jQuery Cycle插件构建幻灯片，该插件在一些顶级幻灯片中包含另一级嵌套幻灯片。
主“容器”滑动水平滑动，然后 – 对于在左侧包含多个图像的“容器”幻灯片 – 这些图像垂直向上滑动。
这里的示例，因为我认为很难想象： http ： //dl.dropbox.com/u/2890872/js-test/index.html
您只会在停止之前进入第二个顶级幻灯片，甚至认为有六个顶级幻灯片（这是我的问题 – 第二张幻灯片只包含一个左手内部图像，这会停止脚本），但是你可以看到预期的转换是什么，并检查整个代码。
问题是并非所有辅助幻灯片都有多个图像，如果幻灯片中有一个或多个图像，jQuery Cycle会自行终止。 此终止也会终止顶级幻灯片，因为它会根据辅助幻灯片放映结束的时间停止和启动。 由于辅助幻灯片演示由于只有一个“幻灯片”而终止，因此下一个外部顶级幻灯片永远不会被调用。 我不知道如何调整代码来解决这个问题。
js：
$(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'); } }); } }); }); html的一个示例：
…additional slides…
幻灯片显示终止于第二个＃home-slides> div，因为只有一个图像。 我已经尝试从幻灯片中删除嵌套和“向上滑动”类，没有内部幻灯片，但这没有帮助。
同样，可以在此处找到包含所有相关代码的完整工作版本： http ： //dl.dropbox.com/u/2890872/js-test/index.html
———–编辑4/10 – 次要更新，可能是领导———-
我在这里和示例链接上编辑了代码，只是为了添加一些细节，这些细节消除了对故障排除的初步想法。 现在，只有带有辅助幻灯片的幻灯片使用“向上滑动”类。
– 我已经尝试在函数中为“end”回调指定’.slide-up’类（’ $(this).children('.slide-up').cycle …’），它确实阻止了循环终止太少的幻灯片，但只会使它终止不匹配的元素！
我得到的最接近的是在最终回调中为函数添加条件检查:(我使用长度来检查是否存在滑动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中消除所有错误和终止，但主幻灯片仍然停留在幻灯片上而没有辅助幻灯片。 我认为需要在“else”语句中添加一些与启动“slideshow.cycle（’next’）;”相关的内容，但我还没有想出正确的语法来实现它。
———–编辑＃2 4/10 – ———-
最近的工作示例： 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’语句时外部幻灯片完全停止 – 我认为外部幻灯片将继续正常。
一个facebook朋友解决了它！ 谢谢，Facebook的朋友！
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我需要学习更多循环以及他为完全理解’nextElement’在此代码中的作用所做的更改，但它肯定有效！
检查这种方法是否对您有所帮助： http ： //www.devcha.com/2010/05/fixed-cycle-terminating-too-few-slides.html
你检查了这个问题……看起来类似的问题，但不同的方法： 嵌套jQuery循环？
在我将“循环插件”作为有史以来最好，最简单的幻灯片插件“授予”之后，我更多地关注它，做了一些实验并花了几个小时的时间。 结果：1。循环（）。循环（’停止’）与循环（’停止’）相同，从未正常工作，它在每第2个内容后停止内部幻灯片。 我把它改成了一个循环（{timeout：0}）…我真的不明白，但它的工作非常好，包括对js活动的firebug评论。 2.因为我需要它每页不仅仅使用一次，而且自动决策是否可行，如果需要或不需要控件，所以我改变了一些事情并将整个js放在$（文档中） ）.ready（function（）{}在页面的标题中。第一个.inner-slideshow从serverside php脚本获得一个添加的class =“active”。
代码现在看起来像那样
//-----------------jquery cycle plugin modified by Michael Gerner, ddlab, 2012-01-15--------------- $('.slideshow').each(function(){ var sl = $(this); var sl_index = sl.index('.slideshow'); var allinner = sl.find('.inner-slideshow'); var firstinner = sl.children('.inner-slideshow:eq(0)'); //----settings outer slideshow var outerfx = 'scrollHorz'; var outerspeed = 500; var outertimeout = 0; var outerprev = '#sl'+sl_index+'prev'; var outernext = '#sl'+sl_index+'next'; //----settings inner slideshow var innerfx = 'fade'; var innerspeed = 2000; var innertimeout = 6000; if (allinner.size() > 1) { //---------more than one inner slideshow var setcontrols = ''; sl.after(setcontrols); var controls_a = sl.find('.slideshow-controls a'); controls_a.click(function(){ var activeinners = sl.find('.active'); activeinners.each(function(){ $(this).removeClass('active').cycle({timeout:0}); }); }); sl.cycle({ fx:outerfx, speed:outerspeed, timeout:outertimeout, prev:outerprev, next:outernext, before:function(){ var activeinners = sl.find('.active'); activeinners.each(function(){ $(this).removeClass('active').cycle({timeout:0}); }); }, after:function(){ $(this).addClass('active').cycle({ fx:innerfx, speed:innerspeed, timeout:innertimeout, autostop: true, end: function() { sl.cycle('next'); } }); } }); } else { //------------just one inner slideshow firstinner.cycle({ fx:innerfx, speed:innerspeed, timeout:innertimeout }); } }); //-----------------jquery cycle plugin modified by Michael Gerner, ddlab, 2012-01-15---------------
现在我很高兴它，特别是js活动上的浏览器负载非常小，我想指出它对移动设备很重要，最后我添加了一些前端编辑工具，如html5upload和jq-filemanager，这是用于网站所有者管理图库的内容。
感谢以前的所有评论和评论，这对我有很大的帮助:-)你可以在这里找到一个轻量级的截图（26kb） http://ddlab.de/screenshots/cycle_gallery.jpg
我在这里上传了工作示例http://ferienhaus-fischland-ahrenshoop.de/mini4/在不久的将来完成这个项目之后，你会在这个页面的任何地方找到这个画廊http://ferienhaus-fischland-ahrenshoop.de可能在开始页面和其他人。