以下代码用于带有动画的幻灯片放映。我希望在每次过渡(即图像更改)之前,动画结束后保持1-2秒。我该怎么办?

<html>
    <style>
        #slideshow{width:310;height:210;border-style:solid;}
        #imge{
                 position:absolute;left:15;top:15;
                 animation:myfirst 5s;
                 animation-iteration-count:infinite;
                 -webkit-animation:myfirst 5s;
                 -webkit-animation-iteration-count:infinite;
        }
        @keyframes myfirst
        {
            from {width:0;}
            to{width:300;}
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            from {width:0;}
            to {width:300;}
        }

    </style>
    <body>
        <div id="slideshow">
            <img id="imge" src="img1.jpg" height="200" width="300"/>
        </div>
        <script>
            var count=1;
            mf();
            function mf(){

                document.getElementById("imge").src="img"+count+".jpg";


                if(count<3)
                   count++;
                else
                    count=1;
                setTimeout("mf()",5000);
            }
        </script>
    </body>
</html>

最佳答案

<script>
var count=0;
mf();
function mf()
{

document.getElementById("imge").src="img"+count+".jpg";

if(count==3)
{
  setTimeout("mf()",8000);
}else{
if(count<3)
count++;
else
count=1;
setTimeout("mf()",5000);

}}
</script>


但是,如果仅在css3上完成幻灯片放映,或者使用溢出css属性在js中创建幻灯片放映会更好。
Example css3 slideshow
这个示例非常有助于我在游戏地图(例如Google地图)中创建。我强烈建议您学习此链接,以减少在Web中创建动画的过程。

10-05 20:48
查看更多