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

时间:2016-03-22 13:34:36

标签: javascript html

怎么了家伙,我在使用此代码时遇到了一些问题。问题是添加第二个幻灯片使第一个幻灯片停止工作,它还会导致第一个幻灯片显示在单击时更改第二个幻灯片上的图片。这是我第一次尝试任何javascript。两个幻灯片都在那里工作,我调查了它并更改了行document.Lunch.src,在中间有不同的名称。我也试过改变这个行函数slideshow()来为两个脚本运行slideshow1()和函数slideshow2()以查看它是否可行但我没有快乐。我理解这个问题之前已经被问过,因为我已经完成了所有类似的问题,但它们是在2年和3年前没有答案。任何帮助都很受欢迎。

这是我的代码

<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>

1 个答案:

答案 0 :(得分:1)

你的基本问题是重新定义事物。由于您没有对slideshow函数进行命名空间,因此在定义第二个函数时,它会替换第一个函数。

所以,最后两个链接都调用相同的slideshow方法。而且由于第二个定义的方法取代了document.Mail的来源,所以会发生这种情况。

如果您想要构建漂亮的幻灯片,最好通过查找如何使用任意数量的框架进行幻灯片演示来获得最佳效果。我相信bootstrap仍然很受欢迎。见here

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