javascript - 如何使用 JavaScript 访问和修改 HTML 页面中的图像？

Question

我的 HTML 页面有一个 ID 为 img 的图像。这个想法是，通过单击第一个、上一个或下一个，用户可以浏览一组图像。如何使用 JavaScript 执行此操作？

Answer 1

这对您来说应该是一个好的开始:

<script>
  var imgs = ["img1.png","img2.png","img3.png"]; // copy images to the same dir
  var index = 0;
</script>
<img src="img1.png" onclick="this.src=imgs[++index%imgs.length]"/>

点击图片即可滑动。

如果您需要按钮，请参阅此示例:

  <img id="clicker" src="img1.png"/>
  <a href="#" onclick="prev(); return false;">Prev</a>
  <a href="#" onclick="next(); return false;">Next</a>
  <a href="#" onclick="first(); return false;">First</a>
  <a href="#" onclick="last(); return false;">Last</a>
<script>
  var imgs = ["img1.png","img2.png","img3.png"];
  var index = 0;
  var clicker = document.getElementById("clicker");
  function prev() { clicker.src = imgs[--index%imgs.length]; }
  function next() { clicker.src = imgs[++index%imgs.length]; }
  function first() { clicker.src = imgs[index=0]; }
  function last() { clicker.src = imgs[index=imgs.length-1]; }
</script>

return false 意味着点击时的默认操作(点击链接)被抑制。 JavaScript 可以访问元素，即使用 id(请参阅此处的 clicker)。一旦您对此感到满意并开始解决浏览器兼容性问题，最好继续使用 jQuery(正如其他人建议的那样)、MooTools 或其他框架。