Contextous Javascript Scroller

Question

연속 자바 스크립트 스크롤러

다음과 이전 클릭을 처리하는 아래 스크립트가 있습니다. 다음과 이전 버튼 동작시 왼쪽에서 오른쪽으로 그리고 그 반대 방향으로이 자바 스크립트를 추가 한 약 1-3 개의 div가 있습니다.

계속해서 스크롤하고 싶습니다. 세 번째 div 스크롤러가 첫 번째 div로 다시 이동해야합니다. 그것은 반대 방향으로 진행해서는 안됩니다. 흐름은 반복적으로 계속되어야합니다.

해결 방법을 알려주십시오.

<div id="mainContainer"> 
<!--mainContainer Div Start--> 
<div class="arrowRight"><img src="images/arrow_left.png" width="36" height="39"></div> 
<div class="arrowLeft"><img src="images/arrow_right_disable.png" width="36" height="39"> </div> 
    <div class="slider"> 
    <div class="slides"> <img src="images/1.jpg" width="250" height="250"></div> 
    <div class="slides"> <img src="images/2.jpg" width="250" height="250"></div> 
    <div class="slides"><img src="images/3.jpg" width="250" height="250"> </div> 
    </div> 
    <!--mainContainer Div End--> 
</div> 

JS

이 같은

window.onload=init; 

function init(){ 

var arrowLeft=document.querySelector('.arrowLeft');  
var arrowRight=document.querySelector('.arrowRight');  
arrowRight.addEventListener('click',slideRight,false); 
arrowLeft.addEventListener('click',slideLeft,false); 

    var flag=1; 
    function slideRight(){ 
    if(flag<3){ 
    flag++; 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(-1024px, 0px)'; 
    } 
    if(flag==3){ 
    arrowRight_div.innerHTML="<img src='images/arrow_left_disable.png' width='36'  
    height='39'>"; 
    } 
} 


    function slideLeft(){ 
    if(flag>1){ 
    flag--; 
    arrowRight_div.innerHTML="<img src='images/arrow_left.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(1024px, 0px)'; 
    } 
    if(flag==1){ 
    arrowLeft_div.innerHTML="<img src='images/arrow_right_disable.png' width='36' 
    height='39'>"; 

    } 
} 

} 

Answer 1

뭔가?

var flag=1; 
function slideRight(){ 
    if(flag<3){ 
    flag++; 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(-1024px, 0px)'; 
} 
    if(flag==3){ 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(2048px, 0px)'; 
    flag = 1; 
}