jQuery幻灯片 - 图像转换问题

我正在制作此幻灯片，但是当图像设置为动画时，我会获得白色闪光灯，然后显示下一张图像。这有点难以解释，所以我创建了这个http://jsfiddle.net/2SJ8B/ 我想它与我的css有关？jQuery幻灯片 - 图像转换问题

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

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

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

来源

2012-11-22 SeanWM

请添加您的浏览器和操作系统的相关信息。 –

@ArashMilani我不认为浏览器或操作系统是问题，但它的窗口7与铬 – SeanWM

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

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

的关键是在运行褪色完成后fadeIn()命令功能...

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

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

来源

2012-11-22 19:26:23 Archer

我认为它几乎在那里。唯一的事情是，第二个幻灯片不会在开始时显示出来。它显示标题而不是图像。 – SeanWM

感谢您的帮助。你按照我之前的回复吗？ – SeanWM

你认为你可以看看我的第一条评论吗？谢谢！ – SeanWM

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

来源

2012-11-22 19:16:17 onon15

jQuery幻灯片 - 图像转换问题

回答

相关问题