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

Question

出于某种我无法理解的原因，最后一张图片闪过一瞬间。除了最后一张图片外，整个事情大约 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>

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

Answer 1

您确定您没有将上一张图像保存为“渐进式”jpg 格式吗？我在创建带有渐进式图像的幻灯片时看到过这种类型的行为。