使用jQuery旋转图像。单击切换/更改图像

时间:2012-08-22 13:09:37

标签: jquery image rotation swap

我总共有2张图片。我只希望显示第一个,隐藏第二个。

然后,当我点击图像时,它会将图像交换到第二张图像,然后我再次点击它会回到第一张图片,然后循环播放,每次点击都会不停地交换图像,如1,2,1, 2,1,2等等。

干杯

3 个答案:

答案 0 :(得分:1)

HTML:

<img src="URL" id="image1" />
<img src="URL" id="image2" style='display:none;'/>

jquery的:

 $("#image1").click(function ( event ) {
      $(this).hide();
      $("#image2").show();
    });
 $("#image2").click(function ( event ) {
      $(this).hide();
      $("#image1").show();
    });

答案 1 :(得分:0)

也许你可以使用它:http://code.google.com/p/jqueryrotate/

答案 2 :(得分:0)

您可以尝试使用jQuery CSS函数,例如;

$('.image').toggle(
function() {
    $('#img1').css({ 'display':'none' });
    $('#img2').css({ 'display':'inline' });
}, function() {
    $('#img2').css({ 'display':'none' });
    $('#img1').css({ 'display':'inline' });
});

Here 是一个有效的现场演示