빠른 클릭 슬라이더가 화면 밖으로 이동하게 여기

Question

입니다 코드 :

<div class="slider"> 
    <ul class="slider-list"> 
     <li> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </li> 
     <li> 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </li> 
     <li> 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </li> 
    </ul> 
</div> 
<div class="controls"> 
    <span class="prev controls-button">prev</span> 
    <span class="next controls-button">next</span> 
</div> 

CSS를

.slider{ 
    width: 900px; 
    margin: 0 auto 40px; 
    position: relative; 
    height: 400px; 
    overflow: hidden; 
} 

.slider-list{ 
    position: absolute; 
    width: 100000px; 
    left: 0; 
    top: 0; 
} 

.slider-list li{ 
    display: block; 
    float: left; 
    width: 820px; 
    height: 320px; 
    color: #fff; 
    font: 20px/28px arial; 
    padding: 40px; 
    text-align: center; 
    background: #45a6ea; 
} 

span{ 
    display: inline-block; 
    background: #e0e0e0; 
    color: #343434; 
    height: 20px; 
    font: 14px/20px arial; 
    padding: 10px; 
    cursor: pointer; 
    min-width: 60px; 
} 

.controls{ 
    text-align: center; 
} 

JQuery와

$('.controls-button').on('click', function() { 
    var slider = $('.slider-list'), 
     sliderItems = slider.find('li'); 
    if ($(this).hasClass('next')) { 
     moveNext(); 

    } else { 
     movePrev(); 
    } 



    function moveNext() { 
     slider.stop().animate({ 
      left: '-=' + 900 
     }, function() { 
      var first = slider.children('li').first().clone(); 
      slider.children('li').first().remove(); 
      first.appendTo(slider).parent(slider).css({ 
       left: 0 
      }); 
     }); 
    } 

    function movePrev() { 
     var last = slider.children('li').last(); 
     slider.children('li').last().remove(); 
     last.prependTo(slider).parent(slider).css({ 
      left: '-=' + 900 
     }).stop().animate({ 
      left: 0 
     });   
    } 
}); 

그래서 문제에

HTML 다음 버튼을 누릅니다. 매우 빠르게 클릭하면 슬라이더가 왼쪽에서 빠져 나옵니다. 그러나 그 일을 그만하면 슬라이더가 다시 가운데에 붙습니다. 하지만 이전 버튼과 같은 것을하려고했습니다. 그냥 빨리 버튼을 클릭하려고하면 볼 수 있습니다. 그래서

function moveNext() { 
    slider.stop().animate({ 
     left: '-=' + 900 
    }, function() { 
     slider.children('li').first().appendTo(slider).parent(slider).css({ 
      left: 0 
     }); 
    }); 
} 

function movePrev() { 
    slider.children('li').last().prependTo(slider).parent(slider).css({ 
     left: '-=' + 900 
    }).stop().animate({ 
     left: 0 
    });   
} 

그러면 알 수 있듯이 복제 방법을 사용합니다. 나는 movePrev 함수에서 .stop()을 대체하려고 시도했지만, 그럼에도 불구하고. 그래서 나는 이미 이것으로 내 머리를 부러 뜨 렸습니다. 왜냐하면 moveNext()에서 필요한만큼 작업을 중단하기 때문입니다. 그러나 movePrev 메서드에서 .stop은 빠른 클릭을 중지 할 때 슬라이더를 가운데로 되돌립니다. http://jsfiddle.net/ujqgoyvL/embedded/result/

Answer 1

당신은 그것의 끝으로 이동 애니메이션을 얻을 수 slider.stop(true, true)을 사용할 수 있습니다 : 여기 죄송합니다

는 http://jsfiddle.net/ujqgoyvL/

대형 화면 바이올린입니다. http://jsfiddle.net/hrq3mmjy/4/