計時器和延遲問題

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>