Question

嗨，我已经制作了这段代码来改变3个div的不透明度。代码应该每10秒显示＃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>

它实际上不起作用我得到“最大调用堆栈超出” 有什么想法吗？

谢谢！

Answer 1

您应该使用函数引用，而不是在setTimeout参数1

中执行函数

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

更好的方法是使用setInterval而不是setTimeout

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

Answer 2

试试这个。

$(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>

在3个div上循环使用淡入/淡出

2 个答案: