Javascript多个幻灯片不起作用

Question

I'm trying to create several automatic slideshows on one page but it won't work. I found this pretty simple Javascript code online but the images won't change, instead it just stays on the first picture for all slideshows. Could anyone tell me if there is something wrong with the code or if there is a better way of doing this please? I'm a newbie when it comes to Javascript.

  function swapImage(id, path)
  {
    var el = document.getElementById(id);
    el.count = el.count || 0;
    el.src = path[el.count];
      el.count = (el.count + 1) % path.length;
  }
  function slideshow() {
      setInterval(function () {
        swapImage('slide1', [
            "pix/cathedral.jpg",
            "pix/fence.jpg",
            "pix/decor.jpg",

        ]);
        swapImage('slide2', [
            "muser/front.jpg",
        "muser/window.jpg",
        "muser/decor.jpg",
        "muser/repair.jpg",

        ]);
    }, 3000);
  }
  onload = slideshow;

Then in the HTML I put this:

<img id="slide1" height="500px" width="100%" src="pix/cathedral.jpg">
<img id="slide2" height="500px" width="100%" src="muser/front.jpg">

Answer 1

I think it almost does the same. Added custom delay time just to add a bit more flexibility

function setSlider(element, sliderArray, delay) {
    var arrIndex = 0
    setInterval(function () {
        element.src = sliderArray[arrIndex]
        if (arrIndex + 1 === sliderArray.length) {
            arrIndex = 0
        } else {
            arrIndex += 1
        }
    }, delay)
}

//usage
setSlider(document.getElementById('slide1'),
    [
        "pix/cathedral.jpg",
        "pix/fence.jpg",
        "pix/decor.jpg",
    ]
    , 1000)

setSlider(document.getElementById('slide2'),
    [
        "muser/front.jpg",
        "muser/window.jpg",
        "muser/decor.jpg",
        "muser/repair.jpg",
    ]
    , 1000)

Answer 2

The first problem is the count property you are referencing in the code; the count property of a DOM element does not exist and nowhere in the code do you create it. To read more about the DOM and what properties it contains visit here https://www.w3schools.com/jsref/dom_obj_all.asp . JavaScript is a difficult language for even veteran programmers to debug, because if something is wrong it just stops working, you then have to use the console in developer tools or a CLI debug program to step through your code. Eclipse has a good javascript plugin. See more about Eclipse here http://www.eclipse.org/ . If you plan to spend time doing JavaScript programming with HTML it pays to throughly familiarize yourself with the DOM. When using the DOM the only things that are available to work with nodes, is the interface that is provided through the DOM specification. Because your el node that is retrieved in the first line of code in the the first function declaration is a DOM node the only tools you have to work with are the interface tools provided. Which means you can't add things the same way you would in standard JavaScript. In JavaScript it is perfectly acceptable to take something like el.count = 0; now el has the property count with a value of 0. In the DOM that is not acceptable. You have to use the interface provided in the above mentioned link. You have to remember that the DOM is not a JavaScript object, it is a document object that provides an interface to work with JavaScript via the DOM.