Question

我有一些wordpress插件，以便在background-image上幻灯片显示div，但除了冲突之外没有运气。是否有纯粹的css3方式来幻灯片放映或至少在加载时旋转新图像。

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

Answer 1

是的！如果你正在寻找纯css3图像滑块，有太多的教程要做，我不认为在这里写完整的答案纯粹的代码是不是很好..所以只是尝试google它并阅读..

http://www.htmldrive.net/items/show/1073/Pure-CSS3-Image-Slider-effect/

div背景幻灯片

1 个答案: