Question

以下代码适用于带动画的幻灯片演示。我希望在每次转换之前，即图像的变化，在动画结束后保持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>

Answer 1

<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上做幻灯片放映或者在js中使用overflow css属性创建幻灯片，那就更好了。
Example css3 slideshow 这个例子非常有助于我在我的游戏地图中创建，例如在谷歌地图中。我非常建议学习这个链接，以便在Web中创建动画。

使用javascript幻灯片动画

1 个答案: