Simple Image Swaping or Slide Show using Java Script
Tuesday, January 13, 2009 8:27Its 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.


