0

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

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

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

4

1 回答 1

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>
于 2013-01-01T12:42:00.667 回答