Question

actully i want to develop slideshow which have two button say next and previous.
so based on click event i want to swap images to next or previous position.
for that i write bellow code.

<script>
$("#nxt").live("click", function () {
  $("#img2").replaceWith("<img src='2.jpg'>");
  $("#img3").replaceWith("<img src='3.jpg'>");
  $("#img4").replaceWith("<img src='5.jpg'>");
  $("#img1").replaceWith("<img src='4.jpg'>");
});
</script>
<td>
  <input type="button" id="nxt" value="nxt" onclick="next()">
</td>
<td>
  <div id="img1">
    <img src="2.jpg">
  </div>
</td>
<td>
  <div id="img2">
    <img src="3.jpg">
  </div>
</td>
<td>
  <div id="img3">
    <img src="5.jpg">
  </div>
</td>
<td>
  <div id="img4">
    <img src="4.jpg">
  </div>
</td>

this code will swap all images on one click,but i want to swap only one image on one click.
next image on next click. how to do that?

Answer 1

Working code for rotating 4 images, next and prev implemented…

jQuery

<script>
    $(document).ready(function() {
        images = []

        $("#nxt").live("click", function () {
            for (i = 1; i <=4; i++) {
                images[i] = $("#img" + i + " img").attr('src');
            }

            for (i = 1; i <=4; i++) {
                if(i == 1) {
                    from = 4;
                } else {
                    from = i - 1;
                }

                $("#img" + i + " img").attr('src', images[from]);
            }
        });

        $("#prev").live("click", function () {
            for (i = 1; i <=4; i++) {
                images[i] = $("#img" + i + " img").attr('src');
            }

            for (i = 1; i <=4; i++) {
                if(i == 4) {
                    from = 1;
                } else {
                    from = i + 1;
                }

                $("#img" + i + " img").attr('src', images[from]);
            }
        });
    });
</script>

HTML

<td>
  <input type="button" id="nxt" value="nxt">
</td>
<td>
  <div id="img1">
    <img src="2.jpg">
  </div>
</td>
<td>
  <div id="img2">
    <img src="3.jpg">
  </div>
</td>
<td>
  <div id="img3">
    <img src="5.jpg">
  </div>
</td>
<td>
  <div id="img4">
    <img src="4.jpg">
  </div>
</td>