0

我正在使用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这是有道理的，因为cycleinit 在 script.js 中并且这个标记在另一个页面上，但是我怎样才能使它工作，或者有更好的方法吗？请记住，页面上有多个滑块。

谢谢，R

4

2 回答 2

1

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

您需要注意 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/

于 2014-03-27T06:26:06.537 回答
0

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

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

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

于 2014-08-20T17:02:18.953 回答