我正在使用以下代码使用 css 将动画添加到幻灯片。但是动画仅应用于第一张图像，而不应用于其他图像。如何仅使用 css 将过渡添加到其他图像？
<html>
<style>
#slideshow{width:310;height:210;border-style:solid;}
#imge{
position:absolute;left:15;top:15;
animation:myfirst 3s;}
@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()",3000);
}
</script>
</body>
</html>
最佳答案
使用CSS3动画属性animation-iteration-count
指定动画播放的次数。默认1，所以取无限
试试这个代码:
Fiddle :
#slideshow{width:310px;height:210px;border-style:solid;}
#imge{
position:absolute;left:15;top:15;
width:310px;height:210px;
animation:myfirst 3s;
animation-iteration-count:infinite;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-webkit-animation-iteration-count:infinite;}
@keyframes myfirst
{
from {width:0px;}
to {width:300px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {width:0px;}
to {width:300px;}
}
JS:
var count=1;
mf();
function mf()
{
document.getElementById("imge").src="img"+count+".jpg";
if(count<3)
count++;
else
count=1;
setTimeout("mf()",3000);
}
关于javascript - 使用CSS向javascript添加动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21012120/