javascript - 在不同时间为每张图像设置间隔

Question

我有一个简单的 jquery 幻灯片。我需要知道如何为每个图像单独更改间隔时间

我只希望第一张图片是“9000”，其余的都是“3000”

<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');}, 9000);});
</script>

<div class="fadein" >
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg"></div>

Answer 1

只需将超时设置为 9000，然后将间隔设置为 3000：

$(function(){
    function fade() {
        $('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');
    }
    setTimeout(function() {
        fade();
        setInterval(fade, 3000);
    }, 9000);
});

Answer 2

这可能是您正在寻找的。它至少会给你一些玩的东西。

http://jsfiddle.net/BjornJohnson/42b8X/

您将所需的持续时间设置为数据属性，脚本使用这些属性设置 setTimeout 的延迟。

喜欢：

<div id="x">
    <img class="active" data-timeout="3000" src="https://si0.twimg.com/profile_images/2644394397/748dd7e11df8dbb93f0fcf2abc141526.png" />
    <img data-timeout="1500" src="https://si0.twimg.com/profile_images/3379531545/ce1eed2263515e4a173dffc815e1a6fc.jpeg" />
    <img data-timeout="5000" src="https://si0.twimg.com/profile_images/3632836331/6e3f4995bd41d49b724e13e694eb1a2d.jpeg" />
    <img data-timeout="2000" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQb09ZMKsDuY5lko2JNEfnXb8_8HTfedS9Uuk_7fdcTGoH5Ps-Xxg" />
</div>