0

実際には、次と前の 2 つのボタンがあるスライドショーを開発したいと考えています。クリックイベントに基づいて、画像を次または前の位置にスワップしたい。そのために、以下のコードを書きます。

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

このコードはワンクリックですべての画像を交換しますが、ワンクリックで1つの画像だけを交換したいです。次のクリックで次の画像。どうやってするか？

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 に答える