Javascript 在多个图像之间切换

我的js中有这样的内容：

$(function(){
    $('.slide:nth-child(11) .layout-100:first-child').click(function(){
        $('.slide:nth-child(11) .layout-100:first-child').fadeOut('slow');
        $('.slide:nth-child(11) .layout-100:nth-child(2)').fadeIn('slow');
    });
});

$(function(){
    $('.slide:nth-child(11) .layout-100:nth-child(2)').click(function(){
        $('.slide:nth-child(11) .layout-100:nth-child(2)').fadeOut('slow');
        $('.slide:nth-child(11) .layout-100:nth-child(3)').fadeIn('slow');
    });
});

……等等

---

我有多个图像，我想能够通过点击功能切换。但我现在是如何写下来的是很多代码。有没有一种方法可以将其放入函数中？

您可以获取可见图像的索引，并将其作为参数传递给函数。您可以轻松计算出哪些图像应该淡入淡出

---

你能摆弄一些有用的东西吗？我可以编辑小提琴并向您展示它是如何工作的。

您可以尝试一下，但如果看不到您的html结构，我无法测试它

jQuery(function($){
  $('.slide:nth-child(11) .layout-100').each(function() {
    $(this).click(function() {
      $(this).fadeOut('slow');
      if ($(this).next().length)
        $(this).next().fadeIn('slow');
      else
        $(this).parent().children().first().fadeIn('slow');
    });
  });
});

---

有没有可能看到一些html的基本结构？至于你的函数，我相信你可以使用

$（this.fadeOut（'slow'）$（this.next（）.fadeIn（'slow'）

而不是

$（'.slide:n子项（11）。layout-100:first-child'）。淡出（'slow'）$（'幻灯片：第n个孩子（11）。布局-100：第n个孩子（2'）。fadeIn（'慢'）这很有效！唯一的问题，我想如果当最后一个项目是达到，你再次点击，你返回到第一个项目。可能吗？@Luc你可以试试我最新的答案。我不能100%确定
.first（）
函数是否正确，因此可能需要更改，请告诉我。如果投票有效，别忘了接受/支持：）