Sunday, 21 April 2013

Background Image SlideShow Using JavaScript and CSS


Here is the code for background image slideshow using javascript and css




<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Language" content="en-us">

<style>

body{

background-repeat: no-repeat;

background-position: 50 50;

}

</style>

<script >

//Specify background images to slide

var imgs=new Array()

imgs[0]="images/Sunset.jpg";

imgs[1]="images/Bluehills.jpg";

imgs[2]="images/Sunset.jpg";

//Specify interval between slide (in miliseconds)

var speed=2000

//preload images

var processed=new Array()

for (i=0;i<imgs.length;i++){

processed[i]=new Image();

processed[i].src=imgs[i];

}

var inc=-1;

function slideimg(){

if (inc<imgs.length-1)

inc++;

else

inc=0;

document.body.background=processed[inc].src;

}

if (document.all||document.getElementById)

window.onload=new Function('setInterval("slideimg()",speed)');

</script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1" height="381">

	<tr>

		<td>

			<p>This is Sample text</p>

			<p>This Sample text</p>

		</td>

	</tr>

</table>

</body>

</html>