javascript - javascript中的幻灯片过渡

Question

我似乎无法让这个幻灯片放映与 javascript 一起工作。图像在第一张图像上正确淡入和淡出，但在转换第二张图像时，它似乎立即跳到图像，而不是像之前那样转换。

<script type="text/javascript">
  var images = ["image1.png", "image2.png", "image3.jpg"];
  var imagecount = 0;
  window.setInterval(setImage,5000);
  function setImage(){
    $('.bgimage').fadeIn(5000);
    $('.bgimage').css('background-image','url('+images[imagecount]+')');
    $('.bgimage').fadeOut(5000);
    imagecount++;       
    if(imagecount > 2){
      imagecount=0;
    }       
  }                
</script>

Answer 1

没有看到 html 结构或 fiddle ，很难准确地排除故障。我猜问题可能出在您的 fadeIn 和 fadeOut 调用上，因为它们当前设置为每个动画整整 5 秒，并且与彼此(它们被异步调用)。相反，您应该使用内置的 jQuery 回调将 fadeIn 方法调整为在 fadeOut 完成后执行。像这样:

$('.bgimage').fadeOut(500, function() {
  $('.bgimage').css('background-image','url('+images[imagecount]+')');
  $('.bgimage').fadeIn(500);
});

我还切换了淡入淡出调用的顺序，因为你应该淡出图像，然后更新它(当它不可见时)，然后淡入淡出。你的间隔应该仍然按照你想要的方式工作，运行每 5 秒。现在，过渡不会花费整整 5 秒来制作动画。