var images = new Array( 
		["../images/1.jpg", "describing text for image one", "title for image one"], 
		["../images/2.jpg", "describing text for image two", "title for image two"], 
		["../images/3.jpg", "describing text for image three", "title for image three"], 
		["../images/4.jpg", "describing text for image four", "title for image four"], 
		["../images/5.jpg", "describing text for image five", "title for image five"] 
		 ); 
 
var speed = 10; 
 
var interval = 4000; 
 
var counter = 0; 
 
function start() { 
	createBackgroundContainer(document.getElementById('image')); 
	setTimeout('startFading()', interval); 
} 
 
function createBackgroundContainer(element) { 
	var image = document.createElement('img'); 
	image.setAttribute('id', 'image'); 
	image.setAttribute('src', element.src); 
	image.setAttribute('alt', element.alt); 
	image.style.width = element.width + 'px'; 
	image.style.height = element.height + 'px'; 
	image.style.margin = '0'; 
	 
	var backgroundContainer = document.createElement('span'); 
	backgroundContainer.setAttribute('id', 'backgroundContainer'); 
	backgroundContainer.style.display = 'block'; 
	backgroundContainer.style.margin = '2em auto 0 auto'; 
	backgroundContainer.style.padding = '0'; 
	backgroundContainer.style.width = element.width + 'px'; 
	backgroundContainer.style.height = element.height + 'px'; 
	backgroundContainer.appendChild(image); 
	 
	var parent = element.parentNode; 
	parent.replaceChild(backgroundContainer, element); 
} 
 
function startFading() { 
	var image = document.getElementById('image');	 
	index = counter % (images.length); 
	counter++; 
 
	var backgroundContainer = document.getElementById('backgroundContainer'); 
	backgroundContainer.style.backgroundImage = "url('" + document.getElementById('image').src + "')"; 
	 
	image.style.opacity = 0; 
	image.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; 
	image.setAttribute('src', images[index][0]); 
	image.setAttribute('alt', images[index][1]); 
	image.setAttribute('title', images[index][2]); 
	 
	for (var i = 0; i < 100; i++) { 
		setTimeout('fadeIn(' + i + ')', speed*i); 
	} 
	setTimeout("startFading()", interval); 
} 
 
function fadeIn(i) { 
	document.getElementById('image').style.opacity = i/100; 
	document.getElementById('image').style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + i + ")"; 
} 

		<div id="slider"> 
			<ul> 
				<li id="content"> 
					<h1>TinySlider - Simple JavaScript Slideshow</h1> 
					<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p> 
					<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p> 
				</li> 
				<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li> 
				<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li> 
				<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li> 
			</ul> 
		</div> 

	<ul id="pagination" class="pagination"> 
		<li onclick="slideshow.pos(0)">1</li> 
		<li onclick="slideshow.pos(1)">2</li> 
		<li onclick="slideshow.pos(2)">3</li> 
		<li onclick="slideshow.pos(3)">4</li> 
	</ul> 

<script type="text/javascript"> 
var slideshow=new TINY.slider.slide('slideshow',{ 
	id:'slider', 
	auto:3, 
	resume:true, 
	vertical:false, 
	navid:'pagination', 
	activeclass:'current', 
	position:0 
}); 
</script> 

		<div id="slider">  
			<ul>  
				<li id="content">  
					<h1>TinySlider - Simple JavaScript Slideshow</h1>  
					<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>  
					<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>  
				</li>  
				<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>  
				<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>  
				<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>  
			</ul>  
		</div> 

		<div id="slider">  
			<ul>  
				<li id="content">  
					<h1>TinySlider - Simple JavaScript Slideshow</h1>  
					<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>  
					<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>  
				</li>  
				<li><img src="photos/sea-turtle.jpg"  alt="Sea turtle" /></li>  
				<li><img src="photos/coral-reef.jpg"  alt="Coral Reef" /></li>  
				<li><img src="photos/blue-fish.jpg"  alt="Blue Fish" /></li>  
			</ul>  
		</div> 

		<div id="slider">  
			<ul>  
				<li id="content">  
					<h1>TinySlider - Simple JavaScript Slideshow</h1>  
					<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>  
					<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>  
				</li>  
				<li><img src="photos/sea-turtle.jpg" width="100%" height="100%" alt="Sea turtle" /></li>  
				<li><img src="photos/coral-reef.jpg" width="100%" height="100%" alt="Coral Reef" /></li>  
				<li><img src="photos/blue-fish.jpg" width="100%" height="100%" alt="Blue Fish" /></li>  
			</ul>  
		</div> 

		<div id="slider">  
			<ul>  
				<li id="content">  
					<h1>TinySlider - Simple JavaScript Slideshow</h1>  
					<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>  
					<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>  
				</li>  
				<li style="width:100%;height:100%;background-image: url(photos/sea-turtle.jpg);"></li>  
				<li style="width:100%;height:100%;background-image: url(photos/coral-reef.jpg);"></li>  
				<li style="width:100%;height:100%;background-image: url(photos/blue-fish.jpg);"></li>  
			</ul>  
		</div>