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

这里有很多不妥之处...

不要使用个别选择器来获取图像。以编程方式计算它们 - 否则每次添加/删除图像时都必须更改代码。
不要重复回调的回调代码，使其成为一个带参数的函数。
请勿使用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();
});

淡入淡出幻灯片（jquery）

3 个答案: