我需要淡入（）淡出（）和延遲（）的jQuery中

-1

時機幫助

function homepageRotator() 
{ 
    var numofimgs = $('#backgroundimageholder_home img').length; 
    var index = 0; 
//run the rotator 
rotator(); 

function rotator() 
{ 
    $('#backgroundimageholder_home img').eq(index).fadeIn('1000').delay(3000*3).fadeOut('1000'); 
    $('#contentcontainer_home ul li').eq(index).fadeIn('1000').delay(3000*3).fadeOut('1000'); 
    index = index + 1; 

    if(index == numofimgs) 
    { 
     index = 0; 
    } 

    setTimeout(function() {rotator()},5000) 
} 
}

所以，我已經有了一個簡單的旋轉，但是旋轉時機看起來很不穩定。第一次加載時，沒有任何時間是正確的，出現第一個圖像，停留3秒鐘然後切換。然後下一個消失，並迅速消失。最後，第三個持續6秒，然後顯示第一個消失。基本上它非常不穩定，我需要理解爲什麼。

感謝您的幫助。

OK，對不起，我應該提供更多的信息，所以這裏是這個基本的HTML佈局：

<div class="backgroundimageholder_home" id="backgroundimageholder_home"> 
    <?php foreach($front->result() as $row) { ?> 
    <img src="images/homepage/<?php echo $row->image; ?>" alt="" class="backgroundimage_home" /> 
    <?php } ?> 
</div> 

<div class="contentcontainer_home" id="contentcontainer_home"> 
    <ul> 

     <?php foreach($front->result() as $row) { ?> 
     <li> 
      <div class="contentcontainer_top_home clearafter" id="contentcontainer_top_home"> 
       <h2><?php echo $row->name; ?></h2> 
       <p> 
        <?php echo $row->text; ?> 
       </p> 
      </div> 

      <div class="contentcontainer_bot_home" id="contentcontainer_bot_home"> 
       <a href="<?php echo $row->link; ?>" title="">CLICK HERE TO VIEW</a> 
      </div> 
     </li> 
     <?php } ?> 

    </ul> 
</div>

所以基本上我的肩旋轉的腳本，然後它也旋轉了一些標題，描述圖像是當時顯示。這就是爲什麼我需要他們在同一時間旋轉。我很確定有更好的方法來做到這一點，但我無法弄清楚。我真的想在所有誠實發生是，有圖像和字幕之間的延遲： - 淡入圖像 - 第2秒延時 - 淡入標題 - 延時5秒 - 淡出標題 - 褪色out image repeat

但是那讓我很想念。無論如何，我幾乎無法讓他們正確旋轉，無論如何，與往常一樣，每個人的幫助表示讚賞。

來源

2011-01-27 dv310p3r

你使用什麼瀏覽器？所有瀏覽器中的時序都不一致嗎？ – z33m 2011-01-27 20:47:53

您正在多次查詢相同的選擇器。爲什麼？ – 2011-01-27 20:50:03

Javascript是異步的。這在開始使用超時時尤其明顯。無論最後一次致電rotator()是否已完成，您撥打setTimeout()的電話每5秒鐘呼叫rotator()。

您的rotator()本身應該需要11秒才能完成（可能稍微多一點，因爲它是兩次調用）。您應該將超時設置爲超過11秒。 12應足以使其平滑並保持一致。其次使用setInterval。這也會有所幫助。在rotator()功能刪除您setTimeout呼叫，並把這個rotator()初始呼叫後（或刪除最初的電話，只是等待12秒，它會開始還有）

setInterval(function() {rotator()},12000);

編輯：

setInterval的解釋

來源

2011-01-27 20:50:34 Cfreak

我需要淡入（）淡出（）和延遲（）的jQuery中

回答

相關問題