Question

我试图在一个页面上创建多个自动幻灯片，但它不会起作用。我在网上发现了这个非常简单的Javascript代码，但图像不会改变，而是只停留在所有幻灯片的第一张图片上。任何人都可以告诉我代码是否有问题，或者有更好的方法吗？对于Javascript，我是一个新手。

import acm.program.*;

public class Chapter5Exercise11isPerfect extends ConsoleProgram{
    public void run (){
        for (int i = 1; i <= 9999; i++){
            int k = 0;
            for (int s = 1; s <=i/2; s++){
                if (i%s ==0){
                    k=k+s;
                }
            }
            if (k%i==0){
                println (k);
            }
        }
    }
}

然后在HTML中我把它：

  function swapImage(id, path)
  {
    var el = document.getElementById(id);
    el.count = el.count || 0;
    el.src = path[el.count];
      el.count = (el.count + 1) &#37; 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;

Answer 1

我认为它几乎一样。添加自定义延迟时间只是为了增加更多的灵活性

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

第一个问题是您在代码中引用的count属性; DOM元素的count属性不存在，并且您在代码中没有创建它。要详细了解DOM及其包含的属性，请访问https://www.w3schools.com/jsref/dom_obj_all.asp。对于即使是经验丰富的程序员来说，JavaScript也是一种难以调试的语言，因为如果出现问题就停止工作，那么你必须在开发人员工具或CLI调试程序中使用控制台来逐步执行代码。 Eclipse有一个很好的javascript插件。在此处查看有关Eclipse的更多信息http://www.eclipse.org/。如果您打算花时间使用HTML进行JavaScript编程，那么通过熟悉DOM就可以付出代价。使用DOM时，唯一可用于处理节点的是通过DOM规范提供的接口。因为在第一个函数声明的第一行代码中检索的el节点是DOM节点，所以您必须使用的唯一工具是提供的接口工具。这意味着您无法像在标准JavaScript中那样添加内容。在JavaScript中，使用el.count = 0之类的东西是完全可以接受的;现在el的属性计数值为0.在DOM中是不可接受的。您必须使用上述链接中提供的界面。您必须记住DOM不是JavaScript对象，它是一个文档对象，它提供了一个通过DOM使用JavaScript的接口。

Javascript多个幻灯片无法正常工作

2 个答案: