Background image changer by time
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.
加载中,请稍侯......
精彩评论