Javascript Images Slide

I am creating a website for my school project. I want to put some pictures in a slide show, but for some reason my code isnt working. Here is my code

Solution 1:

A very basic and simple example of how you can step through an array

//Array of imagesvarImages = ['https://dummyimage.com/100x100/000/fff.jpg',
  'https://dummyimage.com/200x200/000/fff.jpg',
  'https://dummyimage.com/300x300/000/fff.jpg'
];
//Step countervar step = 1;

functiongallery() {
  //change imagedocument.getElementById('Imgs').src = Images[step];
  //Or you can use - document.images.slide.src=Images[step];// is step more than the image array?if (step < Images.length - 1) {
    // No - add 1 for next image.
    step++;
  } else {
    // Yes - Start from the first image
    step = 0;
  }
}
//When the ready, set interval.window.onload = setInterval(gallery, 2500);

<imgid="Imgs"name="slide"src="https://dummyimage.com/100x100/000/fff.jpg" />

The method you're trying will return the following errors in the browser console.

Uncaught ReferenceError: image is not defined(anonymous function)

Uncaught TypeError: Cannot read property 'src' of undefined

The browser console is your best friend when it comes to using javascript.

If you have any questions, please leave a comment below and I will get back to you as soon as possible.

---

If you want to stick with the same method here it is:

var step = 1;
var image1 = newImage();
image1.src = "https://dummyimage.com/100x100/000/fff.jpg";
var image2 = newImage();
image2.src = "https://dummyimage.com/200x200/000/fff.jpg";
var image3 = newImage();
image3.src = "https://dummyimage.com/300x300/000/fff.jpg";

functionslideit() {
  document.images.slide.src = window['image' + step].src;
  if (step < 3)
    step++;
  else
    step = 1;
  setTimeout(slideit, 2500);
}
slideit();

<divclass="row"><divclass="col-md-12"><h3class="Contains"><imgsrc="https://dummyimage.com/100x100/000/fff.jpg"name="slide" /></h3></div>

I hope this helps. Happy coding!

Solution 2:

Your problem is most probably in your "imagex.src=xxxxxxx". The images urls are string and must be quoted as such. So it should be :

image1.src="images/truck1.png"

Also, you try to call setTimeout with a string instead of a function reference/name. It should be :

setTimeout(slideit, 2500);

However, a setInterval would be best here instead of a setTimeout as it will call a function repetingly.

JS aside, there are some quirk in the HTML part. Mostly, you shouldn't use a H3 to wrap a div. H3 are ususaly used for page sub-titles, not for a 400x400 images ^^

As mentioned in your question comments, using eval is generaly a bad idea.

To Simplify, you could do something like this :

<div class="row">
    <divclass="col-md-12"><divclass="Contains"><imgsrc="images/truck1.PNG"name="slide"width="400"height="400"><script>var pictures = ["images/truck1.png",
                                "images/truck4.png",
                                "images/truck7.png"];

                var step = 0;

                functionslideIt(){
                    if (step<3)
                        step++;
                    else
                        step=0;

                    document.images.slide.src=pictures[step];
                }

                setTimeout(slideit, 2500);
            </script></div></div></div>

Share