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吗？在创建带有渐进式图像的幻灯片时，我已经看到过这种行为。

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

1 个答案: