Fading through background images with JavaScript/Jquery

Question

Hello,

I dont know alot about Javascript. I want about 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!

Answer 1

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>