Question

My HTML page has an image with id img. The idea is that by clicking first, previous, or next, the user can navigate through a set of images. How do I do this using JavaScript?

Answer 1

This should be a good start for you:

<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]"/>

click the image to slide.

If you need buttons, see this example:

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

The return false means that default action on click (follow the link) is supressed. Javascript can access elements i.e. using id (see clicker here). Once you get comfortable with this and you start to solve browser compatibility problems, it is good idea to continue with jQuery (as the other suggests), MooTools or other framework.