1

どういうわけか理解できませんが、最後の画像が一瞬点滅しています。最後の画像を除いて、すべてがほぼ 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>

すべての助けに感謝します。

4

1 に答える 1

0

最後の画像を「プログレッシブ」jpg として保存していませんか? プログレッシブ画像でスライドショーを作成しているときに、この種の動作を見たことがあります。

于 2013-07-10T13:52:50.530 に答える