0

我想通过按按钮更改图像。我有两个按钮，一个是下一个，另一个是上一个。当下一个按钮按下新图像时必须显示，上一个按钮按下最后一个图像应该再次出现。但我不能这是正确的。如何使用 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>
4

5 回答 5

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();
    });
});

基本上，可见的图像现在被隐藏了，下一个/上一个图像现在是可见的。

于 2013-04-17T09:14:23.877 回答
0

如何更改图像 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>
于 2013-04-17T08:37:23.607 回答
0

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

于 2013-04-17T08:37:44.377 回答
0 
Change your script,

 $(document).ready(function () {
  $('#secondimage').hide();
  $('#thirdimage').hide();
 $(".arrow").click(function () {
    $('#firstimage').hide();
    $('#secondimage').show();
  });
$(".leftarrow").click(function () {
    $('#firstimage').show();
    $('#secondimage').hide();
  });
});
于 2013-04-17T08:40:37.557 回答
0 
$(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++;
        }
    });
});

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

于 2013-04-17T09:13:38.097 回答