How to change background and text automatically using jquery?

Jquery Script which creates rotator for both banner and text.

Here images and header_texts are the arrays where we are using loop in next couple of lines. I am applying css using jquery to change background and i am adding html content to subheader div using html().

Now the implementation process

Step1 : Copy below javascript/jquery to script.js or your js file or in script tag at the top of the body.
Step2 : Here in this script you need to change only two things.

#slideit (Id for background change) and #subheader (id for content change).

	$(window).load(function() {           
		  var i =0; 
		  var j= 0;
		  var images = ['images/backgrounds/background_2.jpg','images/backgrounds/background_3.jpg','images/backgrounds/background_1.jpg'];
          var header_texts = ['<h1>Heading number 2</h1>','<h1>Heading number 3</h1>','<h1>Heading number 1</h1>'];
		  var image = $('#slideit');
		  var header_txt = $('#subheader');
						//Initial Background image setup
		  image.css('background-image', 'url(images/backgrounds/background_1.jpg)');
		  header_txt.html("<h1>Heading number 1</h1>");
						//Change image at regular intervals
		  setInterval(function(){   
		   image.fadeOut(500, function () {
		   image.css('background-image', 'url(' + images [i++] +')');
		   image.fadeIn(100);
		   });
		   if(i == images.length)
			i = 0;
		  }, 5000);     

		  setInterval(function(){   
		   header_txt.fadeOut(600, function () {
		   header_txt.html(header_texts[j++]);
		   header_txt.fadeIn(100);
		   });
		   if(j == header_texts.length)
			j = 0;
		  }, 5000);     

	});

Step 3 : Copy below CSS to your style sheet.

#slideit
This CSS will help to placing the image to top left of the page. width 100% covers the background entire page and height 100% covers the background entire height of the page. you can see that i have used 130% which is for IE due to some spacing issues, you can adjust as you want

#subheader
This CSS will help to create background for the header text which  and also styling of header

#slideit{
position:absolute;
top:0;
left:0;
width:100%;
height:130%;
z-index:-9999;
}

#subheader {
margin: auto ;
width:920px;
text-align: center ;
height:60px; 
}

#subheader h1{
height:44px;
margin-top:5px;
background:url(../images/subheaderbg.png);
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
padding-top:6px;
position:absolute;
left:40%;
padding-left:15px;
padding-right:15px;
}

Step 4 : Copy following div in the first line of the body. this div helps to display the background.

<div id="slideit"> </div>

Step 5 : Copy following div to body where ever you ant to display the header.

<div id="subheader"></div>

Thanks for reading my post, if you have any queries please feel free to comment below. thanks.