Image Slide show Using Javascript.

Hi Friends,


In this code snippet I have shown you how to display no. of images one by one.For that I have taken a "img" folder in the vertual directory and stored all images named 1.jpg,2.jpg etc;



code given below -----------


<html>
<head>
<script language ="javascript" type ="text/javascript">
var i;
i=0;
var myimgarr=new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg");

function dd(){

document.getElementById("myimg").src=myimgarr[i++];
if(i==4)
i=0;
setTimeout("dd()",2000);

}


</script>
</head>
<body MS_POSITIONING="GridLayout" onload ="dd()">
<h3>Image Slide show Using Javascript.</h3>
<img id="myimg" src="img/1.jpg" width="200px" height="200px">

<br>
<br>
<br>
<br>

<div>
<u>View Source code(Javascript code in the head part.).</u>
<br>
<Head><br>
<script language ="javascript" type ="text/javascript"><br>
<br>
var i;
<br>
i=0;
<br>
var myimgarr=new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg");
<br>

function dd(){
<br>

document.getElementById("myimg").src=myimgarr[i++];<br>
if(i==4)<br>

i=0;<br>
setTimeout("dd()",2000);<br>

}<br>


</script>
</Head>
<br>
<u>View Source code(html code in body part).</u>
<br>
<body onload ="dd()">
<br>
<img id="myimg" src="img/1.jpg" width="200px" height="200px">
</body>
<br>
<br>


</div>

</body>

</html>


-------------------

Thank you.
Enjoy programming.

(AMARJIT SINGH)


Comments

Guest Author: Jayesh Sorathia22 Feb 2013

Very nice article.
You can also use this JQuery cycle plugin.
To download image slide show asp.net example visit this link.
http://jayeshsorathia.blogspot.com/2013/02/image-slide-show-using-jquery-with-aspnet-example.html



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: