타이머 및 지연 문제

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>