HTML Javascript幻燈片優化

我不得不編寫自己的幾行代碼來顯示我的網站splashpage上的幻燈片。我無法使用任何插件，因爲我在HTML5和css3上設計了網站，並且圖像被同步化以便與瀏覽器一起調整大小。現在，出現實際問題時，最後一張圖像需要花費兩倍時間，因爲列表中的每張圖片都是。下面是HTML和JavaScript粘貼。HTML Javascript幻燈片優化

HTML

<div id="backgrounds"> 
    <div class="bgs" style="z-index:1000;"> 
     <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
     <img src="images/main_nop.jpg" alt="" class="background" /> 
    </div> 

    <div class="bgs" style="z-index:999; display: none"> 
     <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
     <img src="images/main_jkl.jpg" alt="" class="background" /> 
    </div> 

    <div class="bgs" style="z-index:998; display: none"> 
     <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
     <img src="images/main_ghi.jpg" alt="" class="background" /> 
    </div> 

    <div class="bgs" style="z-index:997; display: none"> 
     <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
     <img src="images/main_def.jpg" alt="" class="background" /> 
    </div> 

    <div class="bgs" style="z-index:996; display: none"> 
     <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
     <img src="images/main_abc.jpg" alt="" class="background" /> 
    </div> 
    </div>

JAVASCRIPT預先

var count = 0; 
    var repeatCount = 0; 
    var backgrounds = $('.bgs').length; 
    function startSlideShow() { 
     myRecFunc = setInterval(function() { 
      if (count == backgrounds) { 
       $('.bgs').eq(0).stop(true, true).hide(1000, 'easeOutExpo'); 
       $('.bgs').eq(backgrounds - 1).show(1000, 'easeOutExpo'); 
      } 
      if (count < backgrounds) { 
       $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo'); 
       $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo'); 
       count++; 
      } 
      else { 
       count = 0; 
       repeatCount++; 
      } 
     }, 1000); 
    } 
    startSlideShow();

第一如果（）在上面的代碼是我加入到處理I在上面所述的情況之一，由於尋求幫助。

來源

2012-08-14 Taha Rehman Siddiqui

希望你認識到你可以將你的條件邏輯壓縮成單個if和else if而不是兩個ifs _and_其他。 – TheZ 2012-08-14 19:51:22

你可以發佈任何樣品的問題？（jsfiddle.net） – Diego 2012-08-14 19:54:36

我不能將它與來自客戶端的實際圖像一起發佈，並且製作臨時圖像需要時間，問題在於最後的圖像需要雙倍的時間。 – 2012-08-14 19:58:41

你有一個條件，你在整個時間間隔中什麼也不做，這是你的「其他」情況。嘗試移動檢查內部，以便它立即發生。

var count = 0; 
var repeatCount = 0; 
var backgrounds = $('.bgs').length; 
function startSlideShow() { 
    myRecFunc = setInterval(function() { 
     $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo'); 
     $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo'); 
     count++; 
     if (count === backgrounds) { 
      count = 0; 
      repeatCount++; 
     } 
    }, 1000); 
} 
startSlideShow();

來源

2012-08-14 20:07:08 JamesOR

你是一個寶石，男人！ – 2012-08-14 20:20:32

另外，將'$（'。bgs'）'賦值給一個變量。或者，更好的是，爲該元素分配一個id並通過它進行選擇。按類選擇相當緩慢，尤其是在具有大量元素的HTML頁面中。還要移動由'setInterval'調用的函數的外部。 – Vlad 2012-08-14 20:28:34

HTML Javascript幻燈片優化

回答

相關問題