/    Sign up×
Community /Pin to ProfileBookmark

switching from one image to another

Copy linkTweet thisAlerts:
Nov 25.2014

I’m trying to figure out how to switch from one image to another after 500 ms. What I have currently keeps switching between images, but I want each image to display for 500 ms and to have the second image disappear after that 500 ms instead of having it loop. This is what I have right now:

<html>
<head>
<title>loop</title>
<script type = “text/javascript”>

function displayNextImage() {
x = (x === images.length – 1) ? 0 : x + 1;
document.getElementById(“img”).src = images[x];
}

function displayPreviousImage() {
x = (x <= 0) ? images.length – 1 : x – 1;
document.getElementById(“img”).src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 500);
}

var images = [], x = -1;
images[0] = “image1.jpg”;
images[1] = “image2.jpg”;
</script>

</head>
</html>
<body onload = “startTimer()”>
<img id=”img” src=”image1.jpg”>
</body>
</html>

Can anyone help me fix this? Thank you!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyNov 25.2014 — The simple solution to your problem is to use [B]setTimeout()[/B] instead of [B]setInterval()[/B]. [B]setTimeout()[/B] only executes the function once whereas [B]setInterval()[/B] executes repeatedly (until canceled).

But I took a moment to update everything because of a few things in your HTML (like two closing [B]</html>[/B] tags, or the use of the [B]<script>[/B] tag in the [B]<head>[/B]). Not that I think coding habits should be forced upon others, but I did feel some things could be cleaned up.
[code=html]
<html>
<head>
<title>loop</title>
</head>
<body>

<img id="img" src="image1.jpg" alt="" />

<script>
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}

function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}

window.onload = function() {
setTimeout(displayNextImage, 500);
}
</script>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@eestherauthorNov 25.2014 — The simple solution to your problem is to use [B]setTimeout()[/B] instead of [B]setInterval()[/B]. [B]setTimeout()[/B] only executes the function once whereas [B]setInterval()[/B] executes repeatedly (until canceled).

But I took a moment to update everything because of a few things in your HTML (like two closing [B]</html>[/B] tags, or the use of the [B]<script>[/B] tag in the [B]<head>[/B]). Not that I think coding habits should be forced upon others, but I did feel some things could be cleaned up.
[code=html]
<html>
<head>
<title>loop</title>
</head>
<body>

<img id="img" src="image1.jpg" alt="" />

<script>
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}

function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}

window.onload = function() {
setTimeout(displayNextImage, 500);
}
</script>

</body>
</html>
[/code][/QUOTE]

I tried using settimeout, but all that happens is that one of those broken image icons shows up, then the first image, but the second image doesn't show up at all.
Copy linkTweet thisAlerts:
@Sup3rkirbyNov 25.2014 — If you are seeing a broken image icon then the problem is that the image src is wrong, which has something to do with [B]setTimeout()[/B].

That's not really something I can troubleshoot for you either, since I can't see the filenames or locations of images on your computer/server.
Copy linkTweet thisAlerts:
@eestherauthorDec 02.2014 — I fixed the image source problem, but the first image is the only one that shows up - it never advances to the second image. I'm just using two random images to test it out, such as this one for the first image: http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg and this one for the second image: http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg.

Also, is there a way to get rid of the second image after 500ms? I tried using img.remove as I would use in javascript, but that didn't work.
Copy linkTweet thisAlerts:
@Sup3rkirbyDec 02.2014 — I took a moment to run all of this code and the reason it doesn't display the second image is because of the value of [B]x[/B] in the javascript. [B]x[/B] starts as [I]-1[/I], and the script is designed to increment this number by one in such a case, so when it sets the image, it sets [B]x[/B] to [I]zero[/I]. And as I could assume, the first image in your set is [I]image 0[/I], and the second image is [I]image 1[/I]. So in short, when the function runs, it tells it to set the image source to the first image.

You can easily fix this by setting the value of [B][I][U][U]x to 0[/U][/U][/I][/B] in the script.

As far as removing the image after 500 ms, do you mean 500 ms after the image is set? Obviously if it were just 500 ms after the page loads then there would be no point since it would remove the image at the same time it is trying to set it. If it's going to be 500 ms after the second image is set then there are a couple of ways. You could just hide the element itself with CSS or you could actually remove the element from the page. Below I've removed the entire element using the .removeChild() method.
[code=html]
<html>
<head>
<title>loop</title>
</head>
<body>

<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg" alt="" />

<script>
var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
setTimeout(function(){ document.body.removeChild(document.getElementById("img")); }, 500);
}

window.onload = function() {
setTimeout(displayNextImage, 500);
}
</script>

</body>
</html>
[/code]
×

Success!

Help @eesther spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...