다른 div 효과 안에 div를 밀어 넣으십시오.

슬라이딩 이미지 효과를 만들려고합니다. 효과 : 온라인 데모 link text.다른 div 효과 안에 div를 밀어 넣으십시오.

버튼을 빠르게 그리고 임의로 클릭하고 애니메이션이 끝날 때까지 기다리지 않아 예기치 않은 결과가 발생하거나 기능이 작동하지 않을 때까지 문제가 발생합니다. (한 번 이미지 2 장 중간에 멈췄다 ...)

어떻게 버그없이 작동시킬 수 있습니까?
jquery와 같은 슬라이딩 및 scrollLeft 속성이 아닌 position 속성 변경과 같은 다른 방법이 있다는 것을 알고 있습니다. 하지만 가능한 경우 scrollLeft를 그대로 사용하고 싶습니다.

강령 :

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
      body 
      { 
       padding:0px; 
       margin:0px; 
      } 
      #imageContainer 
      { 
       width: 500px; 
       position: relative;    
      } 
      #div 
      {    
       overflow: hidden; 
       white-space: nowrap;        
      } 

      #div img { 
       cursor: pointer; 
       vertical-align: bottom; 
       width: 500px; 
       padding:0px; 
       margin:0px; 
       display:inline; 
      } 


     </style> 
     <script type="text/javascript">       
      var scrollIntervalID; 
      var currentIndex=0;         

      function Scroll(ind){ 

       var dir = ind ==currentIndex?0:ind<currentIndex?-1:1; 
       var steps = Math.abs(ind-currentIndex); 

       scrollIntervalID = setInterval(function(){ 
        var i=(steps*10)-1; 
        return function(){ 
         if (i <= 0) 
          clearInterval(scrollIntervalID); 
         var elm = document.getElementById("div");     
         elm.scrollLeft +=dir * 50; 
         i--; 

         document.getElementById("span").innerHTML=elm.scrollLeft; 

        } 
       }(), 15); 
       currentIndex=ind; 
      }    

     </script> 
    </head> 
    <body> 
     <div id="imageContainer"> 
      <div id="div"> 
       <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/> 
      </div>   
     </div> 

     <div> 
      <input type="button" value="1" onclick="Scroll(0);"/> 
      <input type="button" value="2" onclick="Scroll(1);"/> 
      <input type="button" value="3" onclick="Scroll(2);"/> 
      <input type="button" value="4" onclick="Scroll(3);"/> 
     </div> 
     <span id="span"></span> 
    </body> 
</html>

출처

2010-04-11 mariki

내가 sriously jQuery를 같은 프레임 워크를 사용하도록 추천 할 것입니다하지만 현재 버전에서 작동하도록 주장하는 경우, 당신은 애니메이션 중에 발생하는 시나리오를 돌봐해야합니다.

scrollIntervalID이 있지만 기능 범위 밖에서는 사용되지 않습니다. 이전 슬라이딩 애니메이션이 진행 중일 때 clearInterval을 사용하여 간격 타이머를 지우고 다음 애니메이션을 수행하기 전에 원하는 애니메이션으로 위치를 옮길 수 있습니다.

출처

2010-04-11 10:07:57

, 나는 그것을 몇 번을 테스트하고 그것을 잘 작동하는 것 같다. 지금은이 대답을 받아 들일 것이고, 후자의 경우 여전히 버그가있을 것이고 나는이 질문을 다시 할 것이고 우리는 다른 것을 시도 할 것입니다. – mariki

새 애니메이션을 시작하기 전에 이전 애니메이션이 작동하지 않도록해야합니다. 초기에 설정 :

var scrollIntervalID= null;

을 다음 function Scroll 추가의 시작 :

또한보다는 scrollLeft의 현재 값에 애니메이션의 시작 위치를 기반으로 할 수 있습니다

if (scrollIntervalID!==null) { 
    clearInterval(scrollIntervalID); 
    scrollIntervalID= null; 
}

currentIndex을 기억하려고합니다.

출처

2010-04-11 10:23:17 bobince

null로 scrollIntervalID를 설정하고 null인지 확인하는 것이 도움이되지 않습니다. – mariki

이것은 빠른 수정입니다. 저는 자바 스크립트 전문가가 아닙니다. 하지만이 내 빠른 테스트를 기반으로 작동합니다 귀하의 두 번째 단락은 매우 도움이되었다

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     body 
     { 
      padding:0px; 
      margin:0px; 
     } 
     #imageContainer 
     { 
      width: 500px; 
      position: relative;    
     } 
     #div 
     {    
      overflow: hidden; 
      white-space: nowrap;        
     } 

     #div img { 
      cursor: pointer; 
      vertical-align: bottom; 
      width: 500px; 
      padding:0px; 
      margin:0px; 
      display:inline; 
     } 


    </style> 
    <script type="text/javascript">       
     var scrollIntervalID; 
     var currentIndex=0;         
     var start = true; 
     function Scroll(ind){ 
      if(start){ 
      var dir = ind ==currentIndex?0:ind<currentIndex?-1:1; 
      var steps = Math.abs(ind-currentIndex); 

      scrollIntervalID = setInterval(function(){ 
      start = false; 
       var i=(steps*10)-1; 
       return function(){ 
        if (i <= 0) 
         clearInterval(scrollIntervalID); 
        var elm = document.getElementById("div");     
        elm.scrollLeft +=dir * 50; 
        i--; 

        document.getElementById("span").innerHTML=elm.scrollLeft; 

       } 
      }(), 0); 
      currentIndex=ind; 
      start = true; 
      } 
     }    

    </script> 
</head> 
<body> 
    <div id="imageContainer"> 
     <div id="div"> 
      <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/> 
     </div>   
    </div> 

    <div> 
     <input type="button" value="1" onclick="Scroll(0);"/> 
     <input type="button" value="2" onclick="Scroll(1);"/> 
     <input type="button" value="3" onclick="Scroll(2);"/> 
     <input type="button" value="4" onclick="Scroll(3);"/> 
    </div> 
    <span id="span"></span> 
</body>

출처

2010-04-11 11:33:39 keithics

다른 div 효과 안에 div를 밀어 넣으십시오.

답변

관련 문제