1

请参阅http://jsfiddle.net/rabelais/DW5CV/

我已经开始把这个小提琴放在一起来尝试解决我如何用一个非常简单的 jQuery 来在页面加载时显示第一个全屏图像，然后当用户点击这个图像时它被隐藏并且下一个图像在页面上通过许多图像显示等等。我知道我可以给他们所有单独的 id，然后编写一段很长的代码来说明每个 div，但我想了解如何以更简洁的方式完成此操作？

  $('#img1').click(function() {
  $('#img2').show();
  $('#img1').hide();
  });
4

6 回答 6

1

我根据您的代码制作了一个非常简单的小提琴。图像是动画的.show()，.hide()直到最后一个。然后动画停止，因为没有图像了。

看看这个小提琴。

于 2013-09-30T11:32:48.010 回答
1

根据您的示例小提琴，您可以尝试以下操作：

$('.full').click(function () {
    $(this).hide();
    $(this).next('.full').show();
});

注意：这仅适用于一次迭代。如果你想让它循环，我们可以修改代码。

演示小提琴

编辑：要使循环正常工作，请修改如下代码。基本上我们正在检查是否有一个带有类的next元素（div包含img） 。.full如果它存在，我们就是show它。否则，我们是第一个带有类show的元素。.full

$('.full').click(function () {
    $(this).hide();
    if($(this).next('.full').length === 1)
        $(this).next('.full').show();
    else
        $('.full').eq(0).show();
});

更新的演示

于 2013-09-30T11:41:22.263 回答
1

我不是 JQuery 英雄，但希望这对您有所帮助：

HTML：

<div class="imageBox">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

查询：

$(document).ready( function() {
    $(".imageBox img").hide();
    $(".imageBox img:first-child").show();
});

$(".imageBox img").on( "click", function() {
    if( $(this).next().length > 0 ) {
        $(this).hide();
        $(this).next().show();
    }
    else {
        $(this).hide();
        $(".imageBox img:first-child").show();
    }
});

和一个演示。

于 2013-09-30T11:43:19.530 回答
0

你可以这样使用......

$('#img2').hide();
 $('#img1').click(function() {
  $('#img2').toggle();
  $('#img1').toggle();
  });
于 2013-09-30T11:33:06.323 回答
0

您可以使用可在此处找到的 JQuery 的 Animate api 。

于 2013-09-30T11:28:43.420 回答
0

这个效果很好，试试这个。

$('.full').not(':first').hide();
 $('.full').click(function(){
        $(this).hide();
        $(this).next().show();
 });

沃金演示

于 2013-09-30T12:25:59.353 回答