gpt4 book ai didi

javascript - Jquery Cycle2 渐进式加载显示 <script> 标签

转载 作者:行者123 更新时间:2023-11-28 04:31:10 27 4
gpt4 key购买 nike

我正在尝试设置 jQuery Cycle2 来逐步加载一组图像。页面上有多个.slider对象需要渐进加载图片。

这是 HTML

<li class="slider"><img title="Company Name" alt="Company Name" src="/photos/listings/company-name6.jpg">
<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></li>

这是 JavaScript

    $('.slider').each(function () {
var $this = $(this);

$this.cycle({
slides: '> img',
sync: true,
progressive: function() {
var slides = $('.other-slides', $this).html();
return $.parseJSON( slides );
},
speed: 1500,
timeout: 4000,
loader: true
});
});
显示初始图片,然后循环显示此图片 Result

最佳答案

你就快到了。如果你看progressive example在 Cycle2 网站上,它指出脚本标签需要包含要加载的幻灯片的 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 .

关于javascript - Jquery Cycle2 渐进式加载显示 &lt;script&gt; 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44602469/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com