Question

Rookie在这里......我试图让我的静态背景变成旋转木马......我现在的html看起来像这样：

<body>
    <div class="pageContent">
    </div>
</body>

和我的CSS：

body {
    background: url('http://placehold.it/1600x1200') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

所以我想让背景现在循环播放图像并保持响应。使用CSS3可以轻松完成吗？或者我应该将我的html内容包装在带引导程序的旋转木马中？我无法找到一个如何做到这一点的好例子。提前谢谢。

Answer 1

<强> jsBin demo

Full page gallery fade

我会使用absolute定位DIV覆盖body。使用新图片淡化DIV，然后将同一图片设置为body并隐藏DIV，如： _{（GRAY为BODY，SOrange为DIV）}

Responsive background fade gallery logic

通过预先增加++counter来实现当前图像阵列的增量。

使用剩余运算符 %实现循环修复，以防止计数器超出Array中的图像数量。

循环本身是在.fadeTo()回调函数内部完成的，只需执行loopBg()函数的新迭代。

这是所需的CSS：

*{margin:0;padding:0;} /* Global reset */
html, body{height:100%;width:100%;}
body, #bg{ background: #000 none 50% / cover; }
#bg{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
}

jQ：

var images = [
  "bg0.jpg",
  "bg1.jpg",
  "bg2.jpg"
];
var $body = $("body"),
    $bg = $("#bg"),
    n = images.length,
    c = 0; // Loop Counter

// Preload Array of images...
for(var i=0; i<n; i++){
  var tImg = new Image();
  tImg.src = images[i];
}

$body.css({backgroundImage : "url("+images[c]+")"}); 

(function loopBg(){
  $bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200, 1, function(){
    $body.css({backgroundImage : "url("+images[c%n]+")"}); 
    loopBg();
  });
}());

编辑： 如果您想保持背景更改但是可以滚动内容，只需将overflow:auto;添加到#page，就像在此演示中一样：http://jsbin.com/huzayiruti/1/

Answer 2

<强>＆GT;嗨！因为你必须使用＆＃34; layers＆＃34;和jquery，例如：

<div id="slider1_container">
    <div><img src="image1.jpg" /></div>
    <div><img src="image2.jpg" /></div>
   <div class="wraper">
          .........code
   </div>
</div>

在css中你已经把代码放在前面或者对齐div 回来...... jquery是这样的：

<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script> 
and css like that: 

position: relative; top: 0px; left: 0px; height: 1000px;

* GT;记住这只是一个例子，你必须修改工作代码

需要。并且在互联网上始终存在例子，你可以在这里查询：*

example slider background

＆GT;我希望能帮到你！

Answer 3

我最终找到了一个完全符合我要求的页面：

Bootstrap carousel as website background

将引用您http://untame.net/2013/04/twitter-bootstrap-carousel/，在页面的中间部分将向您展示如何在不编码任何JQ的情况下制作引导背景轮播，除了：

$(document).ready(function() {
    $('.carousel').carousel({interval: 7000});
 });

惊人！

如何淡化循环背景图像？

3 个答案: