Question

我想通过按下按钮来改变图像。我有两个按钮，一个是下一个，另一个是前一个。当下一个按钮按下新图像时必须显示，前一个按钮按下最后一个图像应该是agian.But我可以不能正确地做到这一点。如何使用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();
    });
});

基本上，现在隐藏了可见的图像，现在可以看到下一个/上一个图像。

Answer 2

如何更改图像src？

JavaScript的：

var images = [
    "alpha.jpg",
    "beta.jpg",
    "gamma.jpg"
];
var actImg = 0; // index of actual image

$(document).ready(function () {
    $(".leftarrow").click(function () {
        if (actImg <= 0) { // if first image is displayed, jump to last
            actImg = images.length - 1;
        }
        else {
            actImg--;
        }
        $('#onlyimage').attr('src', images[actImg]);
    });
    $(".rightarrow").click(function () {
        if (images.length <= actImg) { // if last image is displayed, jump to first
            actImg = 0;
        }
        else {
            actImg++;
        }
        $('#onlyimage').attr('src', images[actImg]);
    });
});

HTML：

<div class="imageDiv">
    <div><img src="alpha.jpg" class="image" id="onlyimage"/></div>
    <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div>
    <div><input type="image" src="rightarrow.gif" class="rightarrow"/></div>
</div>

Answer 3

也许在这种情况下，您可以隐藏/显示图像周围的div元素。如果你按照你的方式隐藏图像，div本身仍然会在文档中“可见”，这可能会给你带来不必要的结果。

Answer 4

Change your script,

 $(document).ready(function () {
  $('#secondimage').hide();
  $('#thirdimage').hide();
 $(".arrow").click(function () {
    $('#firstimage').hide();
    $('#secondimage').show();
  });
$(".leftarrow").click(function () {
    $('#firstimage').show();
    $('#secondimage').hide();
  });
});

Answer 5

$(document).ready(function () {
    that = this;
    this.arrayImages = $('.image');
    this.currentPosition = 0;
    $('#secondimage').hide();
    $('#thirdimage').hide();
    $(".arrow").click(function () {
        if (that.currentPosition < that.arrayImages.length) {
            that.arrayImages[that.currentPosition].hide();
            that.arrayImages[that.currentPosition+1].show();
            that.currentPosition++;
        }
    });
});

对于左箭头，它只是另一种方式（：

如何更改按钮单击时的图像

5 个答案: