simple slider

HTML

<img height="200" name="slide" src="https://nvlupin.blob.core.windows.net/images/van/TSM/TSMAU/1/60227/images/APA_2013_29343_233866_KevinVandeVusse_Atlantic_Puffin_KK_1050x1050.jpg" width="400" />



<img height="200" name="slide" src="http://www.hww.ca/kaboom/images/Birds/Atlantic-Puffin.jpg" width="400" />


<img height="200" name="slide" src="https://oceanwide-4579.kxcdn.com/uploads/media-dynamic/cache/widen_1100/uploads/media/default/0001/24/thumb_23788_default_900.jpeg" width="400" />

CSS

#slider{
width: 300px;
height: 150px;
overflow: hidden;
position: relative;
}

.slide{
width: 300px;
height: 150px;
float: left;
    background-image:url('http://static2.grsites.com/archive/textures/green/green035.gif');
}

JavaScript

<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>