以下代码用于带有动画的幻灯片放映。我希望在每次过渡(即图像更改)之前,动画结束后保持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中创建动画的过程。