Contextous Javascript Scroller

Question

連続的なJavaScript Scroller

私は次の前のクリックで働いている以下のスクリプトを持っています。次のボタン操作と前のボタン操作で、このJavaScriptを左から右へ、またはその逆に追加するために、約1から3つのdivがあります。

私はそれを連続的なスクロールにしたいです。 3番目のdivの後にscrollerは再び最初の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; 
}