计时器和延迟问题

Question

我有一个脚本函数，允许图像在4个图像之间旋转。该功能在页面加载时有2秒的超时时间，然后等待8秒钟，然​​后再旋转到第二个（以及后面的图像）

我需要做的是设置它，以便图像在加载后立即开始旋转然后在那之后有8秒的旋转间隔。

这里是一个jsfiddle

$(function(){ 
 
    \t $('.fadein2 > :gt(0)').hide(); 
 
    \t setTimeout(function() { 
 
    \t setInterval(function(){$('.fadein2 :first-child').fadeOut().next().fadeIn().end().appendTo('.fadein2');}, 8000); 
 
    \t }, 2000); 
 
    });

.fadein { 
 
    \t position:relative; 
 
    \t height:400px; 
 
    \t width:300px; 
 
    \t float: left; 
 
    \t padding: 5px; 
 
    } 
 
    .fadein > * { 
 
    \t position:absolute; 
 
    \t left:0; 
 
    \t top:0; 
 
    \t display:block; 
 
    \t padding: 5px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
    <a href="/ContractHome.html"> 
 
    <div class="fadein" style="padding: 15px;"> 
 
     <img src="http://www.view-restaurant.co.uk/uploads/1/1/9/4/11949146/2826626.jpg?902" alt=""> 
 
     <img src="http://d.otcdn.com/imglib/hotelfotos/8/203/hotel-hamilton-island-reef-view-whitsunday-islands-hamilton-island-018.jpg" alt=""> 
 
     <img src="http://www.view-restaurant.co.uk/uploads/1/1/9/4/11949146/2826626.jpg?902" alt=""> 
 
     <img src="http://d.otcdn.com/imglib/hotelfotos/8/203/hotel-hamilton-island-reef-view-whitsunday-islands-hamilton-island-018.jpg" alt=""> 
 
    </div> 
 
    </a> 
 
    <p class="hoverText" style="top: 100px;width: 100%;">Contract</p> 
 
</div>

Answer 1

我想我解决你的问题。 您需要拨打两次电话，一次拨打setTimeout，另一次拨打setInterval。

setInterval是你的很长一段时间（你叫什么后）

和setTimeout您的开始时间（你叫什么很快）。

更新你的代码上Fiddle

这里：

$(function() { 
 
    $('.fadein > :gt(0)').hide(); 
 
    setTimeout(function() { 
 
    setInterval(function() { 
 
    \t fadeInFadeOut() 
 
    }, 8000); 
 
    fadeInFadeOut() 
 
    }, 2000); 
 
}); 
 

 
function fadeInFadeOut(){ 
 
\t $('.fadein :first-child') 
 
    .fadeOut() 
 
    .next() 
 
    .fadeIn() 
 
    .end() 
 
    .appendTo('.fadein') 
 
}

.fadein { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 300px; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 
.fadein > * { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    display: block; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
    <a href="/ContractHome.html"> 
 
    <div class="fadein" style="padding: 15px;"> 
 
     <img src="http://www.view-restaurant.co.uk/uploads/1/1/9/4/11949146/2826626.jpg?902" alt=""> 
 
     <img src="http://d.otcdn.com/imglib/hotelfotos/8/203/hotel-hamilton-island-reef-view-whitsunday-islands-hamilton-island-018.jpg" alt=""> 
 
     <img src="http://www.view-restaurant.co.uk/uploads/1/1/9/4/11949146/2826626.jpg?902" alt=""> 
 
     <img src="http://d.otcdn.com/imglib/hotelfotos/8/203/hotel-hamilton-island-reef-view-whitsunday-islands-hamilton-island-018.jpg" alt=""> 
 
    </div> 
 
    </a> 
 
    <p class="hoverText" style="top: 100px;width: 100%;">Contract</p> 
 
</div>