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

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

我也切换顺序的褪色的电话，你应该淡出图像，然后更新它（虽然它不可见），然后渐回在你的间隔应该还是。以您想要的方式工作，每5秒运行一次。现在，过渡不会花费5秒钟完成动画。