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结构或小提琴，很难以任何准确度进行故障排除。我猜这个问题可能与您的fadeIn和fadeOut来电有关，因为它们目前设置为每个动画完整动画5秒，并且彼此同时制作动画（他们被异步调用）。相反，您应该在fadeIn完成后使用内置的jQuery回调调整fadeOut方法。像这样：

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

我也改变了你的淡入淡出调用的顺序，因为你应淡出图像，然后更新它（当它不可见时），然后淡入它。你的间隔应该仍然有效你想要的方式，每5秒运行一次。现在转换不会花费整整5秒来制作动画。

javascript中的幻灯片转换

1 个答案: