如何更改按钮上的图像点击 [英] How to change the images on button click

问题描述

我想通过按按钮更改图像。我有两个按钮，一个是下一个，其他是前一个。当下一个按钮按新的图像必须显示和上一个按钮按最后一个图像应该来agian.But我可以如何使用jquery做这件事？

I want to change the image by pressing the button.I have two button, one is next and other is previous.When the next button press new image must be shown and previous button press last image should come agian.But I can't do this properly.How to do this using 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>

推荐答案

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

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

basically, the image that is visible is now hidden, and the next/previous image is now visible.

这篇关于如何更改按钮上的图像点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！