Question

actully我想开发幻灯片，下面和前面有两个按钮。因此，基于点击事件，我想将图像交换到下一个或上一个位置。因为我写了下面的代码。

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

此代码将在一次点击时交换所有图像，但我想在一次点击时只交换一个图像。下一次单击下一个图像。怎么做？

Answer 1

用于旋转4张图像的工作代码，下一步和上一步实施...

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

如何使用jquery实现图像幻灯片

1 个答案: