How To Create a Simple Image Slideshow Using JavaScript?

We can create attractive and eye-catching websites by using image slideshows, flash, and other designs. There are so many pre-built JavaScript files and jquery plugins that can be found on the web, but today I am going to tail about Creating simple and easy-to-understand code for image slideshow using JavaScript.

Code for creating a simple image slideshow using JavaScript

Just copy and paste the code below where you want to place the slideshow and change the location of the images.

<script language="JavaScript">
var i = 0;
var path = new Array();
 
// LIST OF IMAGES
path[0] = "image_1.gif";
path[1] = "image_2.gif";
path[2] = "image_3.gif";

function swapImage()
{
   document.slide.src = path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage()",3000);
}
window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />

Demo slideshow for the above code

Code for creating a slideshow with a caption

Just copy and paste the code below where you want to place the slideshow and change the location and caption of the images.

<script type="text/javascript"> 
var i = 0; 
var image = new Array();   
// LIST OF IMAGES 
image[0] = "image_1.gif"; 
image[1] = "image_2.gif"; 
image[2] = "image_3.gif";    
var k = image.length-1;    

var caption = new Array(); 

// LIST OF CAPTİONS  
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";   

function swapImage(){ 
var el = document.getElementById("mydiv"); 
el.innerHTML=caption[i]; 
var img= document.getElementById("slide"); 
img.src= image[i];  
if(i < k ) { i++;}  
else  { i = 0; } 
setTimeout("swapImage()",5000);  
} 

function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} 
else { 
window.onload = function() { 
if (oldonload) { 
oldonload(); 
} 
func();}}}  
addLoadEvent(function() { 
swapImage(); });  
</script> 

<table style="border:3px solid #00aaff;background-color:#00aaaa;"> 
<tr> 
<td> 
<img name="slide" id="slide" alt ="my images" height="285" width="485" src="image_1.gif"/> 
</td> 
</tr> 
<tr> 
<td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
<div id ="mydiv"></div> 
</tr> 
</td> 
</table>

Demo slideshow for the above code

If you wanted to make other JavaScript or CSS image slideshow with different effects, may visit the following posts.

• How to Add Multiple Slideshows on One Page Using Javascript

• How to Create JavaScript Image Slideshow with Links