连续Javascript Scroller

Question

连续JavaScript滚动条

我有下面的脚本正在处理下一个和上一个点击。有大约1到3个div我已经添加了这个JavaScript从左到右流动，反之亦然，在下一个和上一个按钮操作时。

我想让它连续滚动。在第三个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;
}