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>