0

我有一些 wordpress 插件，以便在 abackground-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>
4

1 回答 1

0

是的！如果您正在寻找纯 css3 图像滑块，那么有太多教程可以做到这一点，我认为在这里写完整答案作为纯代码并不是那么好.. 所以试着用谷歌搜索它并阅读..

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

于 2013-08-22T07:31:18.357 回答