자바 스크립트 슬라이드 쇼 효과

문제가 생겼을 때 = 내가 알고있는 슬라이드 쇼 코드를 기반으로 이미지를 사각형 상자로 바꿨으며 각각의 이미지를 하나씩 "활성화"하고 싶습니다. 초 간격. 나는 코드에 무엇이 잘못되었는지 간단히 알 수 없다.자바 스크립트 슬라이드 쇼 효과

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>MiniAnimation</title> 

     <script type="text/javascript"> 

      window.addEventListener("load",onLoadWindow); 

      var active_slide; 
      var slides; 

      function onLoadWindow(e) { 
       var slideShow=document.getElementById("boxofBoxes"); 
       slides=slideShow.getElementsByTagName("div"); 
       active_slide=0; 

       slides[0].classList.add("active"); 

       setInterval(nextSlide,1000); 
      } 



      function nextSlide() { 
       slides[active_slide].classList.remove("active"); 
       active_slide++; 

       active_slide%=5; 

       slides[active_slide].classList.add("active"); 
      } 

     </script> 

     <style type="text/css"> 

      body { 
       background-color:lightblue; 
      } 

      .active { 
       opacity:1; 
       transition:opacity 1s; 
      } 

      .box { 
       display:block; 
       float:left; 
       width:25px; 
       height:25px; 
       background-color:white; 
       margin-left:63px; 
       opacity:0; 
      } 

      #boxofBoxes { 
       width:503px; 
      } 

     </style> 

    </head> 

    <body> 
     <div id="boxofBoxes"> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
     </div> 
    </body> 

</html>

다시 한번 감사드립니다. =)

출처

2013-04-01 Kizer Yakuza

CSS가 작성된 순서 때문에 opacity: 0;이 opacity: 1;을 무시합니다. 다음과 같이 시도해보십시오.

.box { 
    display:block; 
    float:left; 
    width:25px; 
    height:25px; 
    background-color:white; 
    margin-left:63px; 
    opacity:0; 
    transition: opacity 1s; 
} 

.active { 
    opacity: 1;  
}

불투명도 전환 및 위치 지정은 알아야하지만 잘하면 도움이 될 것입니다. http://jsfiddle.net/sJNvw/

출처

2013-04-01 01:28:57 metadept

예 감사 :

여기에 재생하는 jsFiddle입니다! 내가 원래의 코드 에서처럼 .active에서 transition을 유지했다. 당신이 지적한 바와 같이, .box 스타일 정의로 뒤집었다. 나는 처음에 무엇이 설정 되었든간에 마지막으로 부름 된 것이 무엇이든 무엇이든간에 타고 갈 것이라는 (거짓) 인상을 받았다. CSS 스타일링의 순서를 아는 것이 좋습니다 ^^ –

자바 스크립트 슬라이드 쇼 효과

답변

관련 문제