javascript - 在多个图像之间切换

Question

我的 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');
    });
});

...等等。

我有多个图像，我希望能够通过单击功能进行切换。但是我现在写下来的代码很多。有没有办法将它放入 1 个函数中？

Answer 1

您可以试一试，但没有看到您的 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');
    });
  });
});

Answer 2

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

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