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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.