フルスクリーンの背景として1 div

Question

私は1ページを開発中です。ページの中で、私は、これらの画像を1つずつバックグラウンド・イメージにしておき、フェード・イン・フェードアウトする必要があります。

私はこのプロセスをjQuery関数で制御していますが、別の問題があります.1つのdiv（画像を含むdiv）を自分の背景にするにはどうすればいいですか？

divレイアウトが私のバックグラウンドになり、そのjQueryを使用して変更したいと考えています。

$(document).ready(function(){ 
 
    // run every 7s 
 
    raiseToSunrise(1000) 
 
}); 
 

 
function raiseToSunrise(interval) { 
 
    var num = 1; 
 

 
    var theinterval = setInterval(function() { 
 
    var $active = $('#wrapper .active'); 
 
    console.log($active); 
 
    //var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first'); 
 
    var $next = $active.next(); 
 
    $next.css('z-index',1);//move the next image up the pile 
 

 
    $active.fadeOut(8000,function(){//fade out the top image 
 
     $active.css('z-index',0).show().removeClass('active');//reset the z-index and unhide the image 
 
     $next.css('z-index',2).addClass('active');//make the next image the top one 
 
    }); 
 
    num = num+1; 
 
    if (num == 4) { 
 
     clearInterval(theinterval); 
 
     return; 
 
    } 
 
    }, interval); 
 
}

#layout { 
 
    position: absolute; 
 
    z-index:-1; 
 
    height:10%; 
 
} 
 

 
#layout img { 
 
    position: absolute; 
 
    z-index:0; 
 
} 
 

 
#layout img.active { 
 
    z-index:2; 
 
} 
 

 
.canvas { 
 
    z-index=10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> \t \t \t 
 
    <div id="main"> \t \t \t \t 
 
    <!-- Header --> 
 
    <header id="header"> 
 
     <div id="title"> 
 
     <h1><img src="assets/css/images/img_logo.png"></h1> \t \t \t \t \t \t 
 
     </div> 
 
     <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas> 
 

 
     <div class="layout"> 
 
     <img class="active" src="assets/css/images/img_background_night1.jpg" /> 
 
     <img class="active" src="assets/css/images/img_background_sunrise1.jpg" /> 
 
     <img class="active" src="assets/css/images/img_background_day1.jpg" /> 
 
     </div> 
 

 
     <!-- \t <div id="wrapper_top" style="      
 
position: relative; 
 
z-index: 0;"> 
 
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas> 
 
<div id="#content" 
 
style=" 
 
position: absolute; 
 
z-index: 2; 
 
color: #ffffff;"> 
 
</div> 
 
<div id="wrapper_bottom" 
 
style=" 
 
z-index: -1; 
 
top: 0; 
 
height: 100%; 
 
position: absolute; 
 
width: 100%;" 
 
> 
 
</div> 
 
</div> --> 
 
     <div id="botton"> 
 
     <nav> 
 
      <ul> 
 
      <li><a class='icon sensor_button sensor_up_right' id ='sensor_1' onclick="clickedSensor(0);" href="#"><img src="assets/css/images/img_sensor_1.png"></a></li> 
 
      <li><a class='icon sensor_button sensor_up_left' id ='sensor_2' onclick="clickedSensor(1);" ><img src="assets/css/images/img_sensor_2.png"></a></li> 
 
      <li><a class='icon sensor_button sensor_center' id ='sensor_3' onclick="clickedSensor(2);" ><img src="assets/css/images/img_sensor_3.png"></a></li> 
 
      <li><a class='icon sensor_button sensor_arm_right' id ='sensor_4' onclick="clickedSensor(3);" ><img src="assets/css/images/img_sensor_4.png"></a></li> 
 
      <li><a class='icon sensor_button sensor_arm_left' id ='sensor_5' onclick="clickedSensor(4);"><img src="assets/css/images/img_sensor_5.png"></a></li> 
 
      </ul> 
 

 
     </nav> 
 
     <div id='sensor_info' > 
 
      <div id='sensor_title'> 
 
      </div> 
 
      <div id='sensor_message'> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </header> 
 

 

 
    </div> 
 
</div>

Answer 1

これを試してみたが、CSSで背景画像との定期的な画像を置き換える：http://css3.bradshawenterprises.com/cfimg/