使用css为javascript添加动画

Question

我使用下面的代码使用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>

Answer 1

使用CSS3动画属性animation-iteration-count

指定播放动画的次数。 默认值为1，因此将其设为无限

试试这段代码：

小提琴 ：

#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);
}

Answer 2

你想要的是css的animation-iteration-count属性。 你可以在这里查看

通过设置数字，您可以确定图像显示特定动画的次数。 在您的情况下，您可以将其设置为3，因为您有3张图像。 你也可以使用count infinite循环它

Answer 3

<img id="imge" src="img1.jpg" height="200" width="300">

改成

<img class="imge" id="imge1" src="img1.jpg" height="200" width="300" style="display:none;"/>
<img class="imge" id="imge2" src="img2.jpg" height="200" width="300" style="display:none;"/>
<img class="imge" id="imge3" src="img3.jpg" height="200" width="300" style="display:none;"/>

所以css #imge应该是.imge

JavaScript的

function mf()
{
  for(var i=1;i<4;i++)
  {
     document.getElementById("imge"+i).style.display="none";
  }  

  document.getElementById("imge"+count).style.display="block";

 if(count<3)
  count++;
 else
  count=1;
 setTimeout("mf()",3000);

}

在进行图像显示时，将触发动画

Answer 4

从id转到class es：

而不是这个：

    <div id="slideshow">
        <img id="imge" src="img1.jpg" height="200" width="300">
    </div>

    #slideshow{...}
    #imge{...}

对此：

    .slideshow{...}
    .imge{...}

原因是id是唯一的 （你只能有一个），但类不是。

希望这可以帮助。 干杯

使用css为javascript添加动画

问题描述

4 个解决方案

解决方案1
1 已采纳 2014-01-09 05:28:56

解决方案2
1 2014-01-09 05:39:16

解决方案3
0 2014-01-09 05:26:58

解决方案4
0 2014-01-09 05:27:32

使用css为javascript添加动画

问题描述

4 个解决方案

解决方案1 1 已采纳 2014-01-09 05:28:56

解决方案2 1 2014-01-09 05:39:16

解决方案3 0 2014-01-09 05:26:58

解决方案4 0 2014-01-09 05:27:32

解决方案1
1 已采纳 2014-01-09 05:28:56

解决方案2
1 2014-01-09 05:39:16

解决方案3
0 2014-01-09 05:26:58

解决方案4
0 2014-01-09 05:27:32