Question

我正在制作这个幻灯片，但是当图像生动时，我会得到一个白色的闪光，然后是下一个图像。这有点难以解释所以我创建了这个http://jsfiddle.net/2SJ8B/ 我想这与我的CSS有关？

#slideshow {
    width: 700px;
    height: 400px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

#slideshow img {
    position: absolute;
    height: 500px;
    width: 700px;
}

你会注意到它不是一个流畅的动画，但有一些事情正在发生。谢谢！

Answer 1

我认为你的问题是在淡入淡出的中途，两张照片都有50％的透明度，所以你看到25％的白色背景。这可能被视为“闪光”。考虑不淡出传出的图像，而是在淡入完成后隐藏它（使用setTimeout()）。

Answer 2

试试这个更新的小提琴...

http://jsfiddle.net/2SJ8B/5/

关键是淡入淡出完成后运行的fadeIn()命令中的函数...

$('#slideshow img:first').appendTo('#slideshow').fadeIn(1000, function() {
    $(this).siblings().hide();
});

这意味着它需要第一个图像，将它放在最后一个图像之后（在它之前），然后淡入它。一旦完成，它就会隐藏所有其他图像。一秒钟后，它重复。现在双重衰落消失了，白色的“闪光”消失了。

jQuery幻灯片 - 图像过渡问题

2 个答案: