Image Array in Javascript

Question

So I did some research and found something very close to what I need (a very, very simple auto slideshow using images within an array). However, the code I found is not actually using images and I'm not quite sure how to alter the code so that it will work with an array of images instead of strings. I've only gotten as far as creating the array with images...

Any help would be very appreciated!

<!DOCTYPE html>
<html>
<head>
<script>
var wss_i = 0;
var wss_elem;
var wss_array = new Array;
wss_array[0] = "img0.png";
wss_array[1] = "img1.png";
wss_array[2] = "img2.png";
wss_array[3] = "img3.png";
wss_array[4] = "img4.png";
wss_array[5] = "img5.png";

function wssNext(){
wss_i++;
if(wss_i > (wss_array.length - 1)){
wss_i = 0;
}
setTimeout('wssSlide()',1000);
}

function wssSlide(){
wss_elem.innerHTML = wss_array[wss_i];
setTimeout('wssNext()',2000);
}
</script>
</head>
<body>
<h1>My dog is <span id="wss"></span></h1>
<script>wss_elem = document.getElementById("wss");
wssSlide();
</script>
</body>    </html>

If that's the code you found in your research, do more research - it's horrid code! — Alnitak
– Alnitak, Commented Mar 22, 2014 at 9:01
I'm open to suggestions! I'm really new at coding JavaScript and am just looking for the simplest possible way to create a slideshow with an image array. This was the most fitting code I've come across. :/ — lindsey
– lindsey, Commented Mar 22, 2014 at 9:05
It has two^wthree very newbie errors in it - 1. wss_array[n] over and over instead of a simple var wss_array = [ list of elements ], and 2. passing strings to setTimeout, 3. massive pollution wuth global variables — Alnitak
– Alnitak, Commented Mar 22, 2014 at 9:09

Alnitak · Accepted Answer · 2014-03-22 09:19:00Z

1

Replacing your <span> with an <img> element, your code might then look like:

(function() {                       // anonymous function expression - no globals!

    // following declarations are local to the function
    var wss = document.getElementById("wss");
    var imgs = [ "img0.png", "img1.png", ... ];
    var n = 0;

    (function next() {
        wss.src = imgs[n];          // set the image's src
        n = (n + 1) % imgs.length;  // increment the counter
        setTimeout(next, 2000);     // and queue up the next change
    })();                           // invoke immediately so the first image loads

})();                               // start it all up

and that's it!

Put this entire code in your <script> tag at the very end of your <body> element to ensure that the DOM is loaded before the code runs.

edited Mar 22, 2014 at 9:19

answered Mar 22, 2014 at 9:07

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darin Dimitrov · Accepted Answer · 2014-03-22 09:05:16Z

0

You could insert an <img> tag that will be used to display the images:

<span id="wss"><img id="my_img" src="img0.png" /></span>

and then change its src property to the next image:

function wssSlide() {
    var img = document.getElementById('my_img');
    img.src = wss_array[wss_i];
    window.setTimeout(wssNext, 2000);
}

edited Mar 22, 2014 at 9:05

answered Mar 22, 2014 at 8:59

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

2 Comments

Alnitak Over a year ago

this is really not a good solution - there should be a single static image element whose src gets changed using DOM properties!

Darin Dimitrov Over a year ago

Good point. I will update my answer to take your suggestion into account.

Collectives™ on Stack Overflow

Image Array in Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related