jquery - 带有淡入和淡出的幻灯片（jquery）

Question

请帮助我，告诉我这里出了什么问题....我也不想使用 jq 插件，当我 setInterval 代码时，图片以不同的方式出现，对不起我的英语不好

<code>
    $(function(){
        function slideshow(){
        $('.img4').fadeOut(2800,null,function(){
                $('.img3').fadeOut(2800,null,function(){
                    $('.img2').fadeOut(2800,null,function(){
                        $('.img1').fadeIn(2800,null,function(){
                            $('.img2').fadeIn(2800,null,function(){
                                $('.img3').fadeIn(2800,null,function(){
                                    $('.img4').fadeIn(2800,null,function(){
                                        $('.img4').fadeOut(2800)
                                    })
                                })
                            })
                        })
                    })  
                })
            })
        }
        //slideshow()
        setInterval(slideshow,1000);

</code>

Answer 1

这里有很多问题......

1. 不要使用单独的选择器来获取图像。以编程方式找出它们 - 否则每次添加/删除图像时都必须更改代码。
2. 不要为你的回调重复回调代码，让它成为一个接受参数的函数。
3. 不要使用，setInterval而是使用setTimeout并在必要时清除您的回调并初始化新的超时。

也就是说，这些是处理编码风格和最佳实践的更多最佳问题，不一定对您的实际问题负责。但是你从来没有确切地说明问题是什么。如果您可以编辑您的问题并进行详细说明，那将很有用。

Answer 2

我相信您有充分的理由构建自定义幻灯片，但如果我可以建议使用插件来避免无法维护的代码？

http://jquery.malsup.com/cycle/

Answer 3

您每秒钟都在开始一个新的幻灯片，所以过了一会儿，您将有数百个幻灯片尝试为相同的对象设置动画。

而不是有一个开始新幻灯片的间隔，而是在第一个完成时开始下一个：

$(function(){
  function slideshow(){
    $('.img4').fadeOut(2800,null,function(){
      $('.img3').fadeOut(2800,null,function(){
        $('.img2').fadeOut(2800,null,function(){
          $('.img1').fadeIn(2800,null,function(){
            $('.img2').fadeIn(2800,null,function(){
              $('.img3').fadeIn(2800,null,function(){
                $('.img4').fadeIn(2800,null,function(){
                  slideshow();
                })
              })
            })
          })
        })  
      })
    })
  }
  slideshow();
});