javascript - 如何使用纯javascript制作简单的图片库

标签 javascript html visual-studio-2010

我是 javaScript 新手,我尝试制作一个照片库以供练习。我不了解 jQuery,所以我现在不想使用它。互联网上的大多数内容都在使用 JQUERY。

我想使用“下一个图像”按钮滑动图像,但是

  1. 当我点击第一个 img 标签时,它工作正常。
  2. 当我点击第二个输入标签时,相同的图像再次出现。

这两个标签有什么区别。 函数正在被调用。我已经使用alert进行了检查。 这是 Uncaught ReferenceError

经过多次修改,我搜索了很多,我的代码是这样的 脚本:

 <script type="text/javascript">
    var k = 0;
    var imageName = new Array(6);
    imageName[1] = "1.jpg";
    imageName[2] = "2.jpg";
    imageName[3] = "3.jpg";
    imageName[4] = "4.jpg";
    imageName[5] = "5.jpg";
    imageName[6] = "6.jpg";

      function NextImage(){

        if (k == 6) {
            k = 0;
        }
        k++;
        document.getElementById("imagebox").src =imageName[k];

    }
</script>

html:

<form id="form1" runat="server">
<div>
<img id="picbox" src="1.jpg" height="500" width="500" alt="iMAGE NOT FOUND" />
<img src=green-next-button.jpg onclick="javascript:NextImage()" />
<input type="image" onclick="NextImage()" src=green-next-button.jpg />

</div>

请跟踪代码中的问题。提前致谢。 由于某些 Web.config 文件,调试被禁用,但也建议这样做。 请帮助我如何调试 Html 标签。

最佳答案

使用客户端调试器可以非常轻松地调试此级别的 Javascript。 这种函数是每个人在学习 Javascript 时都应该学会使用的东西。

对于 Firefox,您可以将以下插件下载到浏览器以添加调试器:https://addons.mozilla.org/en-US/firefox/addon/firebug/

对于 Chrome,Chrome 开发者工具是一个很好的起点,单击 CTRL+SHIFT+J 即可获取 JavaScript 控制台。以下是如何在 Chrome 中进行 Javascript 调试的说明:

https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

关于javascript - 如何使用纯javascript制作简单的图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18750214/

相关文章:

visual-studio - 为什么打开解决方案总是导致 check out 单元测试项目文件?

html - 如何将菜单链接添加到菜单的最右侧

html - zend 框架 2 html5 音频标签不起作用

c# - 将 .exe 项目转换为类库

php - Javascript从php生成的图像中获取图像大小

javascript - 缩放瞄准鼠标光标的图像

c++ - 我*认为*我有内存泄漏。现在怎么办?

javascript - Jest test.each 的类型不正确

javascript - 我的 Backbone 模型的验证方法在 model.fetch 上调用,但不在 collection.fetch 上调用

javascript - TheIntern 测试框架异步设置