连续 JavaScript 滚动器

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;
}