jQuery cycle2 以编程方式进行渐进式加载

Question

我正在使用 cycle2，并以编程方式在单独的 scripts.js 文件中进行设置。在添加渐进式加载之前，滑块都运行良好。我在页面上有多个滑块，所以设置如下：

$('.slider').each(function () {
    var $this = $(this);
    $this.cycle({
        fx: 'scrollHorz',
        slides: '> a',
        sync: true,
        progressive: slides,
        speed: 'fast',
        timeout: 0,
        autoHeight: 'container',
        next: $this.next('.slider-navigation').find('.next'),
        prev: $this.next('.slider-navigation').find('.prev'),
        loader: true
    });
});

我的 HTML 标记是，对于每个滑块，例如：

<div class="slider">
    <a href="/">
        <img src="example.jpg">
    </a>
    <script class="other-slides" type="text/cycle">
        var slides = [
            "<a href=" / "><img src="
            another - example.jpg " /></a>",
            "<a href=" / "><img src="
            another - example.jpg " /></a>",
            "<a href=" / "><img src="
            another - example.jpg " /></a>"
        ];
    </script>
</div>

但是，现在当我加载页面时，我的控制台状态：ReferenceError: slides is not defined 这很有意义，因为cycle init 在 script.js 中，并且这个标记在另一个页面上，但是我怎样才能使它工作，或者，还有更好的方法？请记住，页面上有多个滑块。

谢谢， 回复

Answer 1

在Cycle 2 progressive demo 中，脚本标签上有一个ID，用于引用要逐步加载的附加幻灯片。显然，您不能使用 ID，因为您要处理多个幻灯片。起初，我认为您可以对处理 prev 和 next 控件的方式应用类似的方法。但是，如果您查看line 1374 of the Cycle 2 source，您会发现它正在使用$() 函数并且只需要一个选择器字符串。幸运的是，它还将接受一个函数，该函数允许我们模仿传递字符串时使用的方法。

您需要注意 JSON 数据中的属性引用。每张幻灯片都应该用双引号括起来，单引号用于属性。如果您将 JSON 分配给脚本标记中的变量，它也将不起作用。

这是你更新的 js：

$('.slider').each(function () {
    var $this = $(this);
    $this.cycle({
        fx: 'scrollHorz',
        slides: '> a',
        sync: true,
        progressive: function() {
           var slides = $('.other-slides', $this).html();
           return $.parseJSON( slides );
        },
        speed: 'fast',
        timeout: 0,
        autoHeight: 'container',
        next: $this.next('.slider-navigation').find('.next'),
        prev: $this.next('.slider-navigation').find('.prev'),
        loader: true
    });
});

和html：

<div class="slider">
    <a href="/">
        <img src="example.jpg">
    </a>
    <script class="other-slides" type="text/cycle">
    [
        "<a href='/'><img src='example2.jpg' /></a>",
        "<a href='/'><img src='example3.jpg' /></a>",
        "<a href='/'><img src='example4.jpg' /></a>"
    ]
    </script>
</div>

这是一个小提琴：http://jsfiddle.net/N7tgL/

Answer 2

谢谢大家做得很好......但是，我确实发现了

next: '> .next',
prev: '> .prev',

用于查找带有类选择器 next 或 prev 的元素。