Question

我正在尝试旋转一些图像。除了我在一些过渡上得到一个奇怪的“闪烁”之外，效果很好。有什么建议我做错了吗？谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Testing</title>  
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<style type="text/css">
#test img {position: absolute;right: 0;top: 0;}
#test img:last-child {display: none;}
</style>

<script> 
function rotateImage()
{
    var $images=$('#test img');
    $images.eq(1).attr({src : files[index]});
    $images.eq(0).fadeOut(1000);
    $images.eq(1).fadeIn(1000, function()
    {
        $images.eq(0).attr('src', files[index]);
        $images.eq(0).show();
        $images.eq(1).hide();
        if (index == files.length-1){index = 0;}else{index++;}
    });
}
var index=1,files=['f1.jpg','f2.jpg','f3.jpg'];
setInterval(rotateImage, 2000);
</script>
</head>

<body>
<div id="test"><img src="f1.jpg" alt="" /><img src="f1.jpg" alt="f1.jpg" /></div>
</body> 
</html>

Answer 1

尝试使用jquery cycle插件。有一个很好的褪色

Answer 2

当你在显示和隐藏元素之间添加一点时间延迟时，它在Firefox中运行正常（我在jsfiddle下使用fadeIn(100, function()完成了它。）

http://jsfiddle.net/SeL3M/

您可以在此处详细了解此行为：

unwanted "flickering" effect when using hide and show in jquery

Answer 3

因为这个而发生闪烁

$images.eq(1).fadeIn(1000, function()
    {
        $images.eq(0).attr('src', files[index]);
        $images.eq(0).show();
        $images.eq(1).hide();
        if (index == files.length-1){index = 0;}else{index++;}
    }
);

在索引1处的fadeIn图像之后，在索引0处为图像设置源并立即显示。这会导致闪烁。

您需要做的是交换图像。

$images.eq(1).fadeIn(1000, function()
{
    $images.eq(0).remove().appendTo('#test');  // swaps the image indices
    if (index == files.length-1){index = 0;}else{index++;}
});

在此处查看演示：http://jsfiddle.net/diode/SeL3M/4/

旋转图像会导致奇怪的闪烁

3 个答案: