I am looking to create a slideshow with animation. I want there to be a delay of 1-2 seconds before each transition, or change in image, after the animation is completed. How can I achieve this?
<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>