setTimeout 메서드를 사용하여 지정된 시간 후에 캐 러셀을 이동하는 방법은 무엇입니까? 자바 스크립트

Question

나는 서로 3 개의 이미지가있는 div가 있습니다. 처음에는 부모 div에 overflow : hidden을 사용하여 나머지 2 개는 숨겨져있는 동안 1 개의 이미지가 표시됩니다. 그런 다음 div가 왼쪽으로 150px 이동할 때까지 1 밀리 초마다 왼쪽으로 이미지 1px로 div를 이동하려면 setInterval 메서드를 사용합니다. 그 무렵 오버 플로우 : 숨김으로 인해 첫 번째 이미지가 보이지 않게 이동하고 두 번째 이미지가 이제 보입니다. 이 시점에서 setTimeout 메소드를 사용하여 잠시 멈 춥니 다. 하지만 그때 일이 잘못되기 시작합니다. 1 초가 경과하면 ... 세 번째 이미지가 속도를 올리고 정지해야하는 위치에서 멈추거나 .... 속도가 빨라지면서 멈추는 지점을 벗어나 보이지 않게됩니다. 그런 다음 버튼을 클릭하면 이미지가 사라지기 시작합니다. 나는 setTimeout을 올바르게 사용하고 있다고 생각하지 않는다. 디버거에서 볼 때 ... setTimeout (pause())을 호출하는 함수는 임의의 간격으로 반복되어 반복되어 스크립트의 나머지 부분을 계속 진행합니다. 그런 다음 무작위로 다시 루프로 돌아옵니다. 그것은 한 번만 실행해야합니다 ... setTimeout이 호출 한 후 1 초 후 다시 호출합니다.

function move() { 
 
    var element = document.getElementById('mover'); 
 
    var pos = -300; 
 
    var go = setInterval(animate, 1); 
 
    
 
    function animate() { 
 
     if (pos === 0) { 
 
      clearInterval(go); 
 
     } else if (pos === -150) { 
 
      function pause() { 
 
       pos++; 
 
      } 
 
      setTimeout(pause, 1000); 
 
      
 
     } else { 
 
      pos++; 
 
      element.style.left = pos + 'px'; 
 
     } 
 
    } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
img { 
 
    width: 150px; 
 
    height: 225px; 
 
} 
 

 
#overflow { 
 
    overflow: hidden; 
 
    width: 150px; 
 
    height: 225px; 
 
} 
 

 
#mover { 
 
    position: relative; 
 
    left: -300px; 
 
    width: 450px; 
 
    font-size: 0; 
 
}

<div id="overflow"> 
 
      <div id="mover"> 
 
       <img src="http://images.primewire.ag/thumbs/2763151_Mr_Robot_2015_30.jpg"> 
 
       <img src="http://images.primewire.ag/thumbs/2777450_Outcast_2016.jpg"> 
 
       <img src="http://images.primewire.ag/thumbs/2770130_Ash_vs_Evil_Dead_1969.jpg"> 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     <button onclick="move()">Click me</button>

죄송 메신저 완전한 초보자와 내가 생각 havent 한 가지가 있어야합니다 알고 있습니다. 누군가 내가 잘못하고있는 것을 말해 줄 수 있습니까?

Answer 1

이 당신이 찾고 있지만, 희망 여기에 뭔가 유용한 거기에있는 것을 정확히 일치하지 않을 수 있습니다

https://jsfiddle.net/tobyl/g01zd64o/17/

jQuery를 :

var move = function() { 
    var element = document.getElementById('mover'); 
    var pos = element.offsetLeft; 

    if (pos != 0) { 
     setTimeout(function() { 
     element.style.left = pos + 150 + 'px'; 
    }, 1000); 
    } 
} 

참고 : 그것은 나 이유에 명확하지 않았다 일부 자바 스크립트가 거기에 있습니다. 뭔가 빠져있을 수도 있습니다. 나는 최소한의 표현을 만들려고 노력했다.