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幻灯片优化

回答

相关问题