Resources » TypeScript » Scripting Languages » Javascript

Changing the Image using Timer


Posted Date: 02-Aug-2008  Last Updated:   Category: Javascript    
Author: Member Level: Gold    Points: 10



This Javascript code sample will change the image using timer. Requirements for this program is as follows

1.Create a Folder and store 4 images and this HTML file in it
2.I have a Folder named "Abbas" and Images named "A.jpg","B.jpg","C.jpg","D.jpg" and a HTML file named "Aptech.html"

3.Open Notepad and enter the code given below


<html>
<head>
<title>Changing Image Using Timer</title>
</head>
<body>
<form name="f1">
<center><input type="button" value="Start Image Changing" onClick="startbk()">
<input type="button" value="Stop Image Changing" onClick="stopbk()"><br><br>
<image name="hello" src="A.jpg" width="200" height="200"></image></center>
</form>
<script language="JavaScript">
index=0
function startTimer()
{
myArray=new Array("A.jpg","B.jpg","C.jpg","D.jpg")

if(index>3)
{
index=0
document.f1.hello.src=myArray[index]
index++

}
else
{
document.f1.hello.src=myArray[index]
index++
}
}
function startbk()
{
ref=setInterval("startTimer()",1000)
}
function stopbk()
{
clearInterval(ref)
}
</script>
</body>
</html>


4.I have created Image named "hello" and src is set to "A.jpg" to display the default image, form named "f1", Array named "myArray" to store image, global variable named "index" whose initial value is set to 0 and three functions

5.If the index is greater than 3 than it is again set to 0 so that it should display the First Image and than index is increemented else only the current image is displayed and the index is increemented

6.Function startbk() is used to start timer using setInterval() function and is stored in variable "ref"

7.Function stopbk() is used to stop timer referncing to the variable "ref"
8.startbk() and stopbk() is called on the button start and stop respectively


Did you like this resource? Share it with your friends and show your love!

Responses to "Changing the Image using Timer"
Feedbacks      

Post Comment:




  • 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:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    Maina Muriithi
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India