带有淡入和淡出的幻灯片显示（jQuery）

Question

please help me and tell me what's wrong here.... also i dont want to use jq plugin when i setInterval the code the pictures are coming with a different way sorry for my bad english

<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

There are quite a few things wrong here...

1. Dont use individual selectors to get the image. Figure them out programatically - otherwise you have to change your code each time you add/remove an image.
2. Dont repeat the callback code for the your callbacks, make that a function that takes parameters.
3. Dont use setInterval instead use setTimeout and have your callbacks clear and initialize new timeouts when necessary.

That said these are more best issues dealing with coding style and best practices, not necessarily responsible for your actual problem. But you never state exactly what the problem is. If you could edit your question and elaborate that would be useful.

Answer 2

I'm sure you have a very good reason for building a custom slide show but if I can suggest using a plugin to avoid unmaintainable code?

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

Answer 3

You are starting a new slideshow every second, so after a while you will have hundreds of slideshows trying to animate the same objects.

Instead of having an interval that starts new slideshows, start the next when the first finishes:

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