자바 스크립트를 사용하여 슬라이드 쇼 애니메이션

다음 코드는 애니메이션이있는 슬라이드 쇼입니다. 모든 전환, 즉 이미지 변경 전에 애니메이션이 끝난 후 1 ~ 2 초가 소요되기를 바랍니다. 어떻게해야합니까? 당신은 단지 JS에서 슬라이드 쇼를 생성하기위한 CSS3 사용하거나 오버 플로우 CSS 속성에 슬라이드 쇼를하는 경우에자바 스크립트를 사용하여 슬라이드 쇼 애니메이션

<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와 자바 스크립트가 아닌 .. CSS를 사용하고 싶다. – 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>

그러나 더 나은합니다.
Example css3 slideshow 이 예제는 Google지도와 같이 내 게임지도에 매우 도움이됩니다. 나는 웹에서 애니메이션을 만드는 과정을 줄이기 위해이 링크를 배우는 것이 좋습니다.

출처

2014-01-09 13:54:05

자바 스크립트를 사용하여 슬라이드 쇼 애니메이션

답변

관련 문제