连续Javascript滚动条

连续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；
函数init（）{
var arrowLeft=document.querySelector（'.arrowLeft'）；
var arrowRight=document.querySelector（'.arrowRight'）；
向右箭头。addEventListener（'click'，slideRight，false）；
箭头左。addEventListener（'click'，slideLeft，false）；
var标志=1；
函数slideRight（）{
如果（标志1）{
旗帜--；
箭头右_div.innerHTML=“”；
var slider=document.querySelector（'.slider'）；
slider.style.webkitttransform+='translate（1024px，0px）'；
}
如果（标志==1）{
箭头左_div.innerHTML=“”；
}
}
}

像这样的东西

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

var标志=1；
函数slideRight（）{
如果（你的问题到底是什么？我想创建一个连续的滑块。假设有三个div，一个接一个。当点击next时，需要2秒div，然后再点击第三个div。点击next按钮后，我应该可以再次看到第一个div。循环三个div。比如1，2，3，1，2，3重复上面的代码在我到达第三个div之前运行良好，之后我禁用了下一次单击。但在这里，我想保持下一个按钮的活动状态，并希望在下一次单击时再次显示第一个div。它应该看起来是连续的过程。我只是添加了html代码，只是为了让每件事都清楚。希望这会有所帮助。请注意，代码正在开发中专门为Ipad制作的幻灯片。@user-动画的持续时间有多长？实际上，这个脚本将幻灯片移回相反的位置，但我想沿连续方向移动div。类似于下面的内容。哦。那么我不知道：）
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;
}