javascript - 我在一个页面上有两个简单的 javascript 幻灯片，但第二个幻灯片停止了第一个幻灯片的工作

Question

怎么了，伙计们，我在让这段代码正常工作时遇到了一些问题。问题是，添加第二个幻灯片会使第一个幻灯片停止工作，还会导致单击第一个幻灯片时更改第二个幻灯片上的图片。这是我第一次尝试任何 JavaScript。两个幻灯片都可以单独工作，我已经研究过它并将 document.Lunch.src 行更改为在中间具有不同的名称。我还尝试将两个脚本的这行 functionlideshow() 更改为 functionlideshow1() 和 functionlideshow2() ，看看这是否有效，但我没有任何乐趣。我知道这个问题之前已经被问过，因为我已经回答过所有类似的问题，但它们是两三年前的，没有答案。非常感谢任何帮助。

这是我的代码

<SCRIPT type="text/javascript">
      var num = 1
      img1 = new Image ()
      img1.src = "Lunch2.jpg"
      img2 = new Image ()
      img2.src = "Lunch.jpg"

     function slideshow()
      {
            num = num + 1

            if (num == 3)
          {num = 1}

        document.Lunch.src=eval("img"+num+".src")
      }
</SCRIPT>

<SCRIPT type="text/javascript">
      var num = 1
      img1 = new Image ()
      img1.src = "Mail.jpg"
      img2 = new Image ()
      img2.src = "Mail2.jpg"

      function slideshow()
          {
                num = num + 1

               if (num == 3)
              {num = 1}

            document.Mail.src=eval("img"+num+".src")
          }
</SCRIPT>
</head> 

这里

    <IMG SRC = "Lunch2.jpg" NAME = "Lunch" BORDER = 3 alt = ""> 
    <p></p>
    <A HREF="JavaScript:slideshow()">Click for next picture</A>

    <IMG SRC = "Mail.jpg" NAME = "Mail" BORDER = 3 alt = "">
    <p></p>
    <A HREF="JavaScript:slideshow()">Click for next picture</A>

Answer 1

你的基本问题是重新定义事物。由于您没有为 slideshow 函数命名空间，因此当您定义第二个函数时，它将替换第一个函数。

因此，您最终会得到两个链接，它们都调用同一个 slideshow 方法。由于第二个定义让该方法替换了 document.Mail 的源代码，所以就会发生这样的情况。

如果您只想构建一个漂亮的幻灯片，那么最好的方法是查找如何使用任意数量的框架来制作幻灯片。我相信 bootstrap 仍然很流行。请参阅here 。

如果您想了解有关命名空间 javascript 函数和变量的更多信息。我推荐一个 JavaScript 教程。我暂时没有对此的建议。