javascript - 如何在单击按钮时更改图像

Question

我想通过按下按钮来更改图像。我有两个按钮，一个是下一个，另一个是上一个。当下一个按钮按下时必须显示新图像并且上一个按钮按下最后一个图像应该再次出现。但是我可以不正确地执行此操作。如何使用 jquery 执行此操作？

$(document).ready(function () {
$('#image2').hide();
$('#image3').hide();
$(".arrow").click(function () {
        $('#image1').hide();
        $('#image2').show();
    });
});

HTML 是

<div class="imageDiv">
   <div><img src="potraits.jpg" class="image" id="image1"/></div>
   <div><img src="pot.jpg" class="image" id="image2"/></div>
   <div><img src="potri.jpg" class="image" id="image3"/></div>
   <div><input type="image" src="arrow.gif" class="arrow"/></div>
   <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div>
</div>

Answer 1

http://jsfiddle.net/S6t9R/4/

$(document).ready(function () {
    $('img:not(:first)').hide();
    $(".arrow").click(function () {
        $('img:not(:last):visible').
        hide().
        parent().
        next().
        children().
        show();
    });
    $(".leftarrow").click(function () {
        $('img:not(:first):visible').
        hide().
        parent().
        prev().
        children().
        show();
    });
});

基本上，可见的图像现在已隐藏，下一张/上一张图像现在可见。