Question

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

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

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

Answer 1

我根据你的代码制作了一个非常简单的小提琴。图像使用.show()和.hide()进行动画处理，直到最后一个。然后动画停止，因为没有剩下的图像。

查看this fiddle。

Answer 2

根据您的样本小提琴，您可以尝试以下内容：

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

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

Demo Fiddle

编辑：要使循环正常工作，请按以下方式修改代码。基本上我们正在检查是否有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();
});

Updated Demo

Answer 3

我不是JQuery的英雄，但希望这能帮到你的路上：

HTML：

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

JQuery的：

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

和demo。

Answer 4

您可以使用JQuery的Animate api找到here。

Answer 5

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

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

Answer 6

这很有效，试试这个。

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

<强> Woking Demo

点击div hides然后在页面上显示下一个div？

6 个答案: