contineous Javascript Scroller

Question

JavaScript continue Scroller

J'ai ci-dessous le script qui travaille sur suivant et cliquez précédent. Il y a environ 1 à 3 div pour lesquels j'ai ajouté ce JavaScript pour couler de gauche à droite et vice versa sur l'action du bouton suivant et précédent.

Je veux faire défiler en continu. Après le troisième div scroller devrait à nouveau naviguer vers la première div. Cela ne devrait pas aller dans le sens inverse. L'écoulement devrait être continu encore et encore.

Veuillez conseiller la solution pour y parvenir.

<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

Quelque chose comme ça?

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