图像幻灯片不淡入淡出然后淡入吗?

时间:2018-11-14 16:28:39

标签: javascript jquery html css

我正在尝试制作图像幻灯片,以选择随机图像,淡出当前图像,然后淡入随机选择的图像。如果这样的话。如果没有,代码可能会解释我要做什么:

function cycleImages(){
  var images = [
      "gallery-1.jpg",
      "gallery-2.jpg",
      "gallery-3.jpg"

  ];
  var randomImg = images[Math.floor(Math.random()*images.length)]
  $("#switch").attr("src",randomImg).fadeOut(4000).stop(true,true).hide().fadeIn(4000)
}

$(document).ready(function(){
    setInterval('cycleImages()', 7000);
})

这是我第一次使用Jquery。我希望它在选择随机选择的图像之前淡出,但是它只是随着困难的过渡消失而在下一个图像中淡出。请帮帮我,谢谢!

1 个答案:

答案 0 :(得分:1)

fadeOut采用第二个参数。淡出完成时的回调函数。 像这样:

$("#switch").attr("src",randomImg).fadeOut(4000, () => {
    //this will run after fading out.
    $("#switch").fadeIn(4000);
});

提琴:https://jsfiddle.net/17w3edgv/1/