使用java腳本的幻燈片動畫

以下代碼是用於帶動畫的幻燈片。我希望在每次轉換之前（即圖像變化）在動畫結束後持續1-2秒。我該怎麼辦？使用java腳本的幻燈片動畫

<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>

來源

2014-01-09 user2828552

由於您已經在使用關鍵幀，爲什麼不嘗試使用CSS幻燈片？ – Jonathan

所以你想讓我只使用CSS而不是JavaScript .. – user2828552

只是建議你可以... – Jonathan

<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 這個例子非常有助於我在我的遊戲地圖中創建，如在谷歌地圖中。我非常推薦學習這個鏈接，以瞭解在web中創建動畫的過程。

來源

2014-01-09 13:54:05

使用java腳本的幻燈片動畫

回答

相關問題