Question

我正在尝试设置jquery cycle2以逐步加载一组图像。页面上有多个“.slider”对象需要逐步加载图像

＆＃xA;＆＃xA;

这是HTML

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt; li class =”slider“＆gt;＆lt; img title =”公司名称“alt =”公司名称“src =”/ photos / listings / company-name6.jpg“＆gt;＆＃xD;＆＃xA;＆lt; script class =”other-slides“type =”text / cycle“ ＆gt; [＆lt; img title ='Ad 6 Auto wide'alt ='Ad 6 Auto wide'src ='/ photos / listings / ad-6-auto-wide.jpg'＆gt;＆＃xD;＆＃xA; ＆lt; img title ='Ad 6 Auto wide'alt ='Ad 6 Auto wide'src ='/ photos / listings / ad-6-auto-wide1.jpg'＆gt;＆＃xD;＆＃xA;＆lt; img title ='Ad 6 Auto wide'alt ='Ad 6 Auto wide'src ='/ photos / listings / ad-6-auto-wide2.jpg'＆gt;＆＃xD;＆＃xA;＆lt; img title ='广告6自动广告'alt ='广告6自动广播'src ='/ photos / listings / ad-6-auto-wide3.jpg'＆gt;＆＃xD;＆＃xA;＆lt; img title ='Ad 6 Auto宽'alt ='Ad 6 A. uto wide'src ='/ photos / listings / ad-6-auto-wide4.jpg'＆gt;＆＃xD;＆＃xA;]＆lt; / script＆gt;＆lt; / li＆gt;

＆＃xD;＆＃xA;

＆＃xA;＆＃xA;

这是Javascript

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  $ （'.slider'）。each（function（）{＆＃xD;＆＃xA; var $ this = $（this）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; $ this.cycle（{＆＃xD;＆＃xA;幻灯片：'＆gt; img'，＆＃xD;＆＃xA;同步：true，＆＃xD;＆＃xA; progressive：function（）{＆＃ xD;＆＃xA; var slides = $（'。other-slides'，$ this）.html（）;＆＃xD;＆＃xA; return $ .parseJSON（slides）;＆＃xD;＆＃xA; }，＆＃xD;＆＃xA; speed：1500，＆＃xD;＆＃xA; timeout：4000，＆＃xD;＆＃xA; loader：true＆＃xD;＆＃xA;}）;＆＃xD ;＆＃XA;}）;

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA;＆＃ xA;显示初始图片，然后循环显示＆＃xA; 结果 ＆＃XA;

Answer 1

你几乎就在那里。如果你查看cycle2网站上的progressive example，它会注意到脚本标记需要包含要加载的幻灯片的JSON数组。每个单独的幻灯片都需要用双引号括起来，并用逗号分隔幻灯片。

这里是渐进幻灯片的更新JSON：

<script class="other-slides" type="text/cycle">
[
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'>"
]
</script>

这里是working fiddle。

Jquery Cycle2 Progessive加载显示<script>标记

1 个答案: