javascript - 最后一张图片在图库中闪烁

由于某种原因，我无法理解，最后一张图像闪烁了一秒钟。除了最后一张图片，整个作品大约100％正确。任何人都可以帮忙...我真的很困并且需要帮助。

该代码是波纹管。或者在fiddle上

//CSS
<style type="text/css">
#slideshow img {
    width:400px;
    height:300px;
    top:100px; left:350px;
    z-index:0;
}
#slideshow img.active{
    z-index:10;
}
.animate {
    animation-name:anim;
    animation-duration: 1s;
}
@keyframes anim
{
    0%   {left:350px;}
    50%  {left:750px; top:-100px; transform:rotate(50deg);}
    51%  {z-index:10;}
    52%  {z-index:0;}
    100% {left:350px;}
}
</style>

//javascript
<script>
function slider() {
    var active = $('.active', '#slideshow');
    active.css({ 'z-index': 10 });
    if (active.hasClass('last')) {
        active.siblings(":first").css({ 'z-index': 9 });
    } else {
        active.next().css({ 'z-index': 9 });
    }

    active.removeClass('active');
    active.addClass('animate');
    setTimeout(function () {
        active.css({ 'z-index': 0 });
        if (active.hasClass('last')) {
            active.siblings(":first").addClass('active');
        } else {
            active.next().addClass('active');
        }
        active.removeClass('animate');
    }, 1000);

}

$(function () {
    setInterval("slider()", 2000);
});
</script>

//html
<div id="slideshow">
    <img src="picture/img1.jpg" style="position:absolute;" class="active" />
    <img src="picture/img2.jpg" style="position:absolute;"                />
    <img src="picture/img3.jpg" style="position:absolute;" class="last"   />
</div>

非常感谢所有帮助，谢谢。

最佳答案

您确定没有将最后一张图像另存为“渐进式” jpg吗？在创建带有渐进图像的幻灯片时，我已经看到了这种行为。

关于javascript - 最后一张图片在图库中闪烁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17572131/