2013-08-22 248 views
0

我有幾個WordPress插件爲了在div上幻燈片background-image,但不是除了衝突運氣。是否有一種純CSS的幻燈片放映方式,或至少在加載時旋轉新圖像。div背景幻燈片

<div id="bg_containers"> 
    <div class="bg1"></div> 
    <div class="bg2"></div> 
    <div class="bg3"></div> 
</div> 

<script src="<?php bloginfo('template_url'); ?>/js/jquery.cycle.lite.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#bg_containers').cycle({ 
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 

<style type="text/css"> 
body {padding:0; margin:0;} 
#content {position:relative;width:800px; height:600px; margin:0; z-index:999; padding:270px 0 0;} 
#text_box {background:#000; color:#ffffff; padding:10px; margin:0 auto; width:600px;} 

/* classes to work with cycle plugin for BG images */ 
#bg_containers {width:800px; margin:0;} 
#bg_containers div {width:800px; height:600px; margin:0 auto;} 
#bg_containers .bg1 {background:url(<?php bloginfo('template_url'); ?>/images/slide-1.jpg) no-repeat;} 
#bg_containers .bg2 {background:url(<?php bloginfo('template_url'); ?>/images/slide-2.jpg) no-repeat;} 
#bg_containers .bg3 {background:url(<?php bloginfo('template_url'); ?>/images/slide-3.jpg) no-repeat;} 
</style> 

回答