Question

我正在尝试使用jQuery Cycle插件构建幻灯片，该插件在一些顶级幻灯片中包含另一级嵌套幻灯片。

主“容器”滑动水平滑动，然后 - 在左侧包含多个图像的“容器”幻灯片 - 这些图像垂直向上滑动。

这里有样品，因为我觉得很难想象： http://dl.dropbox.com/u/2890872/js-test/index.html

你只会在它停止之前到达第二个顶级幻灯片，甚至认为有六个顶级幻灯片（这是我的问题 - 第二张幻灯片只包含一个左手内部图像，这会停止脚本），但你可以看到预期的转换是什么，并检查整个代码。

问题是并非所有辅助幻灯片都有多个图像，如果幻灯片中有一个或多个图像，jQuery Cycle会自行终止。此终止也会终止顶级幻灯片，因为它会根据辅助幻灯片放映结束的时间停止和启动。由于辅助幻灯片演示由于只有一个“幻灯片”而终止，因此下一个外部顶级幻灯片永远不会被调用。我不知道如何调整代码来解决这个问题。

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＆gt; div因为只有一个图像。我已经尝试从幻灯片中删除嵌套和“上滑”类，没有内部幻灯片，但这没有帮助。

同样，可以在此处找到包含所有相关代码的完整工作版本：http://dl.dropbox.com/u/2890872/js-test/index.html

-----------编辑4月10日 - 次要更新，可能还有领导----------

我在这里和示例链接上编辑了代码，只是为了添加一些细节，以消除故障排除的第一个想法。现在，只有带有辅助幻灯片的幻灯片使用“向上滑动”类 - 我已经尝试在函数中为“end”回调（'$(this).children('.slide-up').cycle ...'）指定'.slide-up'类，这确实可以防止循环因为太少的幻灯片而终止，但这只会使它成为现实终止不匹配的元素！

我最接近的是在最终回调中为函数添加条件检查：（我使用长度来检查滑动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'语句时外部幻灯片完全停止 - 我认为外部幻灯片将继续照常。

Answer 1

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 我需要更多地研究Cycle以及他为完全理解'nextElement'在这段代码中的作用所做的改变，但它肯定有效！

Answer 2

检查此方法是否有助于您： http://www.devcha.com/2010/05/fixed-cycle-terminating-too-few-slides.html

您是否检查了这个问题......看起来类似的问题，但方法不同：Nested jQuery Cycle?

Answer 3

在我将“循环插件”作为有史以来最好，最简单的幻灯片插件“授予”之后，我对它进行了更多的注视，并做了一些实验并花了几个小时的时间。结果： 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 = '<div class="slideshow-controls"><a class="prev" id="sl'+sl_index+'prev" href="#"></a> <a class="next" id="sl'+sl_index+'next" href="#"></a></div>';
        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

Answer 4

我在这里上传了工作示例http://ferienhaus-fischland-ahrenshoop.de/mini4/ 在不久的将来完成这个项目之后，你会在这个页面的任何地方找到这个图库http://ferienhaus-fischland-ahrenshoop.de可能在起始页面和其他页面上。

Jquery循环 - 多个嵌套幻灯片和循环终止

4 个答案: