How to fade loop background images?

2020-01-25 08:14发布

站内文章 / jQuery
9 0 0

问题:

Rookie here .. I'm trying to make my static background become a carousel.. my current html looks something like this:

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

and my 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;
}

So I'd like to make the background now cycle images and stay responsive .. Can this be done easily using CSS3? or should I maybe wrap the contents of my html in a carousel with bootstrap? I wasn't able to find a good example of how to do this. Thanks in advance.

回答1:

jsBin demo

I would do it using an absolute positioned DIV overlaying the body. Fade in the DIV with a new image, then set the same image to body and hide the DIV like: (GRAY is BODY, SOrange is DIV)

The increment of the current image Array is achieved by preincrementing ++counter.

The loop fix is than achieved using Remainder Operator% to prevent the counter from exceeding the number of images in Array.

The loop itself is done inside .fadeTo() callback function by simply do a new iteration of the loopBg() function.

This is the needed 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%;
}

And the 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();
  });
}());

Edit: If you want to keep the background changing but make the content scrollable, simply add overflow:auto; to #page like in this demo: http://jsbin.com/huzayiruti/1/



回答2:

> Hi ! for that you have to work with "layers" and jquery, example:

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

and in the css you have put the code for align the div in front or back ... the jquery is like that :

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

*> remember is just example, you have to modify the code for work as you

need.and always exist examples in the internet you can consult here:*

example slider background

> regards I hope help you !



回答3:

i ended up finding a page that had exactly what i was looking for:

Bootstrap carousel as website background

will refer you to http://untame.net/2013/04/twitter-bootstrap-carousel/ and about halfway down the page will show you how to make a bootstrap background carousel without coding any JQ except for:

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

amazing!



标签： jquery html css twitter-bootstrap
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~