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

last picture flashes through image gallery

本文关键字：图片库 闪烁 一张 最后      更新时间：2023-09-26

由于某种原因，我无法理解，最后一张图像在瞬间闪烁。除了最后一张图片外，整件事几乎100%正确。有人能帮忙吗。。。我真的陷入困境，需要帮助。

代码如下。或者在小提琴上

//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吗？我在制作带有渐进图像的幻灯片时看到过这种行为。

相关文章：