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中并且这个标记在另一页上，但我怎么可能做这个工作，还是有更好的方法？请记住页面上有多个滑块。

谢谢， [R

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。

jQuery cycle2以编程方式逐行加载

2 个答案: