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>