Javascript jQuery以编程方式循环2渐进加载

我正在使用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没有定义

，这很有意义，因为

循环

init在script.js中，并且这个标记在另一个页面上，但是我如何才能做到这一点，或者有更好的方法吗？记住页面上有多个滑块

谢谢， R

在脚本标签上有一个ID，用于引用要逐步加载的其他幻灯片。显然，您不能使用ID，因为您正在处理多个幻灯片。起初，我认为你可以采用类似的方法来处理上一个和下一个控件。但是，如果查看，您会发现它正在使用

$（）

函数，并且只需要一个选择器字符串。幸运的是，它还将接受一个函数，该函数允许我们模仿传递字符串时使用的方法

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

[
"",
"",
""
]

---

这里有一把小提琴：

谢谢，伙计们干得很好。。。然而，我确实发现了这一点

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

---

使用类选择器next或prev查找元素。

非常感谢您的帮助。很好的回答和解释。我还没有用我的代码对它进行测试，但我相信它会起作用。非常感谢。