Javascript sliding 이미지 갤러리 - jQuery 없음

Question

순수한 JS 이미지 슬라이더를 만드는 방법에 대한 조언이있는 사람이 있습니까? 나는 각 이미지가 끝난 후 일시 중지하고 모든 이미지를 살펴보고 다시 시작하려고합니다. 내가 찾을 수있는 모든 것은 jQuery 플러그인이고 나는 JS만으로이 작업을 수행 할 것이다.

Answer 1

나는 이런 식으로 뭔가 가고 싶어 :

var sliderTool = { 
    _totalItems : 0, 
    _visibleItems : 6, 
    _currentOffset : 0, 
    _timeout : null, 
    next : function(){ 
     ... 
    }, 
    prev : function(){ 
     ... 
    }, 
    play : function(){ 
     ... 
    }, 
    pause : function(){ 
     ... 
    } 
}; 

을 도심.

타임 아웃을 설정할 때마다 언제든지 clearTimeout (sliderTool._timeout)을 할 수 있도록 _timeout 필드에 저장하십시오. 다음 및 이전에는 애니메이션 또는 간단한 이미지 대체가 포함될 수 있습니다. 애니메이션과 슬라이드 사이의 간격에 대해 별도의 시간 제한을 추가 할 수 있습니다.

"add()"메서드를 sliderTool에 추가하고 window.load 또는 "body onload"에 모든 이미지를 추가 한 다음 start() 메서드를 실행할 수 있습니다. 페이지로드 후 이미지를 동적으로 추가 할 수도 있습니다.

자동 로딩 및 기본 설정을위한 init()를 추가 할 수도 있습니다.

다시 이것이 가능한 해결책의 기본 초안입니다. 한 번 실행하면 더 구체적인 질문을하게 될 것입니다. 전반적으로, 접근 방식으로, 나는 일반적인 조언을 구하기 전에 먼저 몇 가지 해결책을 생각해내는 것이 좋습니다.)