Its very simple to create a slide show using JavaScript.

 < html >
< head  >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title> < /title>
< script type="text/javascript">
function f1(){
if(document.getElementById("d1").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='block';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d2").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='block';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d3").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='block';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d4").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='block';
} else if(document.getElementById("d5").style.display=='block'){
  document.getElementById("d1").style.display='block';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
  }
}
window.onload=function(){
setInterval("f1()", 3000)
}
< /script>

< body>
< div id="d1" style="display:block"> < img src="Druv.jpg"  /> < /div>
< div id="d2" style="display:none"> < img src="DSC00177.jpg"  /> < /div>
< div id="d3" style="display:none"> < img src="family 2.jpg"  /> < /div>
< div id="d4" style="display:none"> < img src="s2-6x8-2.jpg"  /> < /div>
< div id="d5" style="display:none"> < img src="Vanda.jpg"  /> < /div>
< /body>

Above code can be divided into 2 parts. that is javascript and html.

< script type="text/javascript">
function f1(){
if(document.getElementById("d1").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='block';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d2").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='block';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d3").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='block';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d4").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='block';
} else if(document.getElementById("d5").style.display=='block'){
  document.getElementById("d1").style.display='block';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
  }
}
window.onload=function(){
setInterval("f1()", 3000)
}
< /script>

The above part is the java script. It has to be inserted the head tag of the HTML Page.

< div id="d1" style="display:block"> < img src="Druv.jpg"  />< /div>
< div id="d2" style="display:none"> < img src="DSC00177.jpg"  />< /div>
< div id="d3" style="display:none"> < img src="family 2.jpg"  />< /div>
< div id="d4" style="display:none"> < img src="s2-6x8-2.jpg"  />< /div>
< div id="d5" style="display:none"> < img src="Vanda.jpg"  />< /div>

The above code is to be included in the Body of the HTML page.
In the above script we create 5 div tags which contains images. Only one of the div is set to visible and remaining are hidden using the

style="display:block"

and

style="display:none"

.

In the javascript we call the f1() function for every 3 seconds using

window.onload=function(){
setInterval("f1()", 3000)
}

This part of the code loads the function on page load. And in the f1 function we check and swap the images.