Fading through background images with JavaScript/Jquery
I dont know alot about Javascript. I want a开发者_StackOverflow中文版bout 5 background images to continuously rotate and fade with a 5 second interval.
There are a lot of image slideshows available on the web, but I need it to be with a background image on my site.
Any help is much appreciated!
Using jQuery you can do it like this:
setInterval(function(){
var source = $("#background-images img:first").attr("src");
$('#background-images img:first').appendTo($('#background-images'));
$('#fading-images-container').css('background', 'url('+ source +') no-repeat');
},5000);
html:
<div id="fading-images-container"> </div> <!-- this div will show the fading background images after picking them up from the background-images div -->
<div id="background-images"> <!-- hide this div in the CSS, it's only to hold the images-->
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
</div>
To use fading, I would suggest not using background images, but actual images in the div.
I have done it like this in the past:
setInterval(function(){
$('#fading-images:first-child').fadeOut('slow')
.next('img').fadeIn('slow')
.end().appendTo('#slideshow');},
4000);
html:
<div id="fading-images">
<img src="img/home-1.jpg">
<img src="img/home-2.jpg">
<img src="img/home-3.jpg">
</div>
This code works without error on all browsers and has no dependencies like jquery or YUI. The one restriction is that the images must all be formatted to the same size as the image tag if a height and width are assigned.
Add the following code to the head of the html doc:
<script language="javascript type="text/javascript">
/* ****************************
* updated for all browsers by
* Evan Neumann of Orbiting Eden on
* October 6, 2011.
* www.orbitingeden.com - evan@orbitingeden.com
* original version only worked for IE
*****************************/
/* ****************************
* this works by having the primary image in an <img> tag
* cycled once every [slideShowSpeed] milliseconds
* at the end of the cycle, the backgound image is advanced and
* the foreground image is stepped more transparent
* until the background image is fully exposed.
* finally, the foreground image is advanced and reset to 100% opaque
*****************************/
<!-- Begin
/* *****************************
* * editable by user
* ***************************/
var slideShowSpeed = 5000; // Set slideShowSpeed (milliseconds) shared by IE and other borwsers
var crossFadeDuration = 5; // Duration of crossfade (1/10 second) shared by IE and other borwsers
var crossFadeIncrement = .05; //crossfade step amount (1 is opaque) for non-IE browsers
// Specify the image files
var Pic = new Array(); // do not change this line
// to add more images, just continue the pattern, adding to the array below
Pic[0] = 'images/dare2wear-427ED-e.jpg';
Pic[1] = 'images/PBW_3238EDSM-e.jpg';
Pic[2] = 'images/dare2wear-441_2ED-e.jpg';
/* ********************************
* do not change anything below this line
**********************************/
var f = 0; //index of the foreground picture
var b = 1; //index of the background picture
var p = Pic.length; //number of pictures loaded and in queue - this may increase as time goes on depending on number and size of pictures and network speed
//load the picture url's into an image object array
//used to control download of images and for IE shortcut
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {//this is trigerred by <body onload="runSlideShow()" >
//if IE, use alternate method
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
//increment the foreground image source
document.images.SlideShow.src = preLoad[f].src;
//if IE, use the shortcut
if(document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
//all other browser use opacity cycling
else {
var imageContainer = document.getElementById('imageContainer');
var image = document.images.SlideShow;
//convert an integer to a textual number for stylesheets
imageContainer.style.background = "url('"+Pic[b]+"')";
//set opacity to fully opaque (not transparent)
image.style.opacity = 1;
//run fade out function to expose background image
fadeOut();
}
//increment picture index
f++;
//if you have reached the last picture, start agin at 0
if (f > (p - 1)) f = 0;
//set the background image index (b) to one advanced from foreground image
b = f+1;
//if b is greater than the number of pictures, reset to zero
if(b >= p) {b = 0;}
//recursively call this function again ad infinitum
setTimeout('runSlideShow()', slideShowSpeed);
}
function fadeOut(){
//convert to element
var el = document.images.SlideShow;
//decrement opacity by 1/20th or 5%
el.style.opacity = el.style.opacity - crossFadeIncrement;
//if we have gone below 5%, escape out to the next picture
if(el.style.opacity <= crossFadeIncrement) {
return;
}
//wait 50 milliseconds then continue on to decrement another 5%
setTimeout('fadeOut()', crossFadeDuration*10);
}
Then add an onload even to the body tag, like:
<body onLoad="runSlideShow()">
And somewhere in the document add two elements with the following id's:
<!-- this is the main image background and can be a div, td, fieldset or similar-->
<div id="imageContainer">
<!-- this is the main image foreground -->
<img id="SlideShow" name='SlideShow' width="240" height="320">
</div>
加载中,请稍侯......
精彩评论