Swapping images over interval of time with JavaScript - Techist - Tech Forum

Go Back   Techist - Tech Forum > Techist Forum Information > Projects and Tutorials
Thread Tools Display Modes
Old 11-15-2013, 02:38 PM   #1 (permalink)
Newb Techie
Join Date: Nov 2013
Location: Bulgaria
Posts: 4
Send a message via Skype™ to GreFox
Smile Swapping images over interval of time with JavaScript

This articles assumes you know what these stuff are:

1. variables;
2. arrays;
3. setInverval function;
4. document.getElementById;

You have a picture cromwell.png and you want it to change to charles.png every 4 seconds, just for the
heck of it. This is your HTML:
	<img src="cromwell.png" id="static_image" />
Now, let's write the JavaScript
First, we call a function that will tell the browser
to do the stuff we want after the page loads:

	window.onload = function(){
		// our JS here
Next put our images cromwell.png and charles.png
in an array:

	var images = new Array('charles.png', 'cromwell.png');
Then we get the ID of the <img> element that holds the original
picture and that we want to set to change every 4 seconds:

	var static_image = document.getElementById('static_image');

We declare the count variable "image_number" that will basically count
the number of the current image. For example, if the current image
is cromwell.png the count variable will equal 0, if it is charles.png
then the "image_number" will equal 1.

	var image_number = 0;
Now the most important part. We use the setInterval
function that will swap the images every 4 seconds.
First, we change the current image cromwell.png
with charles.png which is 0 in the image_number variable.
Then we increment image_number and in the next 4 seconds,
when the setInterval function will be called again,
image_number will be 1. Then we set it, if the image_number
is incremented above 1, or above the number of images
we have in the images array, we set the image_number variable
equal to 0. Otherwise, the image_number will increment to infinity,
and our images in the images array are only 2 so the <img> element
will be blank

					 home_image.src = images[image_number];
					 if(image_number > images.length){
					 	image_number = 0;
Note that the setInterval function work with milliseconds. 1000 milliseconds = 1 second.
Why it doesn't use seconds? Just for the heck of it!

GreFox is offline   Reply With Quote
Old 01-02-2014, 10:04 AM   #2 (permalink)
It's all just 1s and 0s
office politics's Avatar
Join Date: Jan 2004
Location: in the lab
Posts: 6,555
Send a message via MSN to office politics
Default Re: Swapping images over interval of time with JavaScript

its not working for me. I'm on ie 9. i zipped up the folder and attached it to this post. Please take a look and see what needs to change.

i would think something about how the functions are declared. Usually i would declare a function at the top and then call it when needed.
Attached Files
File Type: zip js-intv.zip (3.2 KB, 0 views)
office politics is offline   Reply With Quote


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Our Communities

Our communities encompass many different hobbies and interests, but each one is built on friendly, intelligent membership.

» More about our Communities

Automotive Communities

Our Automotive communities encompass many different makes and models. From U.S. domestics to European Saloons.

» More about our Automotive Communities

Marine Communities

Our Marine websites focus on Cruising and Sailing Vessels, including forums and the largest cruising Wiki project on the web today.

» More about our Marine Communities

Copyright 2002-2015 Social Knowledge, LLC All Rights Reserved.

All times are GMT -5. The time now is 01:56 AM.

Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2016, vBulletin Solutions, Inc.