Background image changer by time_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-06 05:02 出处：网络

I need some suggestions and ideas to improve a background image rotator. Thoughts? <script type=\"text/javascript\">

I need some suggestions and ideas to improve a background image rotator.

Thoughts?

<script type="text/javascript">
    var images = ['bg1.png', 'bg2.png', 'bg3.png'];
    var curImage = 0;
    function switchImage()
    {
        curImage = (curImage + 1) % images.length开发者_JAVA百科
        document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
    }
    window.setInterval(switchImage, 500);
</script>

I want the images to fade into each other.
I need to be able to preload the images so it doesn't have the delay when loading them when they first display.

preloading images is done with the Image object and its source, as in...

var img1 = new Image();
img1.src = "mypicture.jpg";

that will preload them.

As for fading, you'll want to create an animation using the alpha property of the css of the container div. http://www.w3schools.com/css/css_image_transparency.asp

Just increment/decrement the opacity over time.

1) Preloading:

var images = ['bg1.png', 'bg2.png', 'bg3.png'];

for (var i = 0; i < images.length; i++) {
    (new Image()).src = window.location.href + '/images/' + images[i]; 
}

Change this part window.location.href + '/images/' to suit you better.

2) Fading

In short you cannot fade background images.

If you absolutely need fading, you'll have to create your backgrounds in an img tag, and position it behind the content of your body, like this:

http://jsfiddle.net/XH78L/

<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script>
var displayBox;

$(document).ready(function() {

  StartShow();

});

function StartShow() {
    var interval = 5000;
    var slideShowID;

    slideShowID = setInterval(Gallery, interval);

}

function Gallery() {
  var nextImage = $("#container li.selected").next().length;
  if (nextImage > 0){
    $("#container li.selected").removeClass("selected").next().addClass("selected");
    imgSrc = $("#container li.selected").children().attr("src");
    if(imgSrc != null) {
      $("#banner").fadeOut('slow', function() { $("#banner").css("background-image", imgSrc); }).fadeIn();
    }
  }
  else {
    $("#container li.selected").removeClass("selected").siblings(':first').addClass("selected");
    imgSrc = $("#container li.selected").children().attr("src");
    if (imgSrc != null) {
      $("#banner").fadeOut('slow', function() { $("#banner").css("background-image", imgSrc); }).fadeIn();
    }
  }
}
</script>
</head>
<body>

<ul id="container" style="display: none;">
    <li class="thumbnail selected"><img src="1.jpg"/></li>
    <li class="thumbnail"><img src="2.jpg"/></li>
    <li class="thumbnail"><img src="3.jpg"/></li>
    <li class="thumbnail"><img src="4.jpg"/></li>
    <li class="thumbnail"><img src="5.jpg"/></li>
    <li class="thumbnail"><img src="6.jpg"/></li>
    <li class="thumbnail"><img src="7.jpg"/></li>
    <li class="thumbnail"><img src="8.jpg"/></li>
    <li class="thumbnail"><img src="9.jpg"/></li>
</ul>


<div id="banner"></div>

</body>
</html>

Just set the starting background-image to whatever image you want to load on land and then the show will start on Document.Ready.