循環與淡入淡出3 divs

Question

您好我已經做了一塊代碼來改變3個div的不透明度。 代碼應每10s顯示＃background2，隱藏＃background1，然後隱藏background2顯示背景3＃...

<div id="background1" class="backgrounds" style="opacity:1"></div> 
    <div id="background2" class="backgrounds" style="opacity:0"></div> 
    <div id="background3" class="backgrounds" style="opacity:0"></div> 

    <style type="text/css"> 
     #background1{ background-image: url('<?= HTTP_PROJECT_ROOT?>/image/background/1.jpg')} 
     #background2{ background-image: url('<?= HTTP_PROJECT_ROOT?>/image/background/2.jpg')} 
     #background3{ background-image: url('<?= HTTP_PROJECT_ROOT?>/image/background/3.jpg')} 
     .backgrounds{ background-clip: cover;width:100%;height:100%;left: 0px; top: 0px; position: fixed;z-index:-1;} 
    </style>  


    <script type="text/javascript"> 
     var nb_background = $('.backgrounds').length; 
     var id_next_background,id_current_background =''; 

     function reloadBackground(){ 

      $('.backgrounds').each(function(){ 
       if($(this).css("opacity")=="1"){ 
        id_current_background = $(this).attr("id").replace("background",""); 
        id_next_background = parseInt(id_current_background); 
        id_next_background ++ ; 

        if($("#background"+id_next_background).length==0){ 
         id_next_background="1"; 
        } 
       } 
      }); 

      $("#background"+id_current_background).animate({opacity:0},2000); 
      $("#background"+id_next_background).animate({opacity:1},2000); 
      setTimeout(reloadBackground(),10000); 
     } 

     $(function(){ 
      reloadBackground(); 
     }); 
    </script> 

它實際上不工作，我得到「最大調用堆棧exceded」 任何想法？

謝謝！

Answer 1

試試這個。

$(function(){ 
 
    setInterval(reloadBackground,1000); 
 
}); 
 
function reloadBackground(){ 
 
    var visible = $('.backgrounds:visible'); 
 
    var index = $('.backgrounds').index(visible); 
 
    var arraymax = $('.backgrounds').length; 
 
    var next = index +1 >= arraymax ? 0 : index +1; 
 
    visible.hide(); 
 
    $('.backgrounds').eq(next).show(); 
 
}

#background1 { 
 
    background-image: url('http://dummyimage.com/500x400/000/fff'); 
 
} 
 
#background2 { 
 
    background-image: url('http://dummyimage.com/500x400/f00/fff') 
 
} 
 
#background3 { 
 
    background-image: url('http://dummyimage.com/500x400/00f/fff') 
 
} 
 
.backgrounds { 
 
    background-clip: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    position: fixed; 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="background1" class="backgrounds" style="display:block;"></div> 
 
<div id="background2" class="backgrounds" style="display:none;"></div> 
 
<div id="background3" class="backgrounds" style="display:none;"></div>

Answer 2

您應該使用的函數參考，不執行在setTimeout的參數1

setTimeout(reloadBackground,10000); //not setTimeout(reloadBackground(),10000); 

功能做的更好的方式是使用setInterval而不是setTimeout

$(function(){ 
    setInterval(reloadBackground,10000); 
    //remove the setTimeout in function reloadBackground 
});