Image Slider mit reinem Javascript

Question

Ich möchte Bild-Slider mit reinem JS mit Folie-Effekt erstellen.Wenn ich nächste Schaltfläche zum ersten Mal funktioniert.Erstes Bild geht links und zweite kommt.aber das zweite Mal, das ich Bild es beginnt wieder von Anfang an Warum rutscht das dritte Bild nicht? Sie können es

<style> 
     #container{ 
      width: 870px; 
      height: 540px; 
      overflow: hidden; 
      margin: 0 auto; 
     } 
     #img-holder{ 
      width: calc(870px*3); 
     } 
     img{ 
      float: left; 
      position: relative; 
     } 
    </style> 


<div id="container"> 
    <div id="img-holder"> 
     <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/1.jpg" alt="1"> 
     <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/2.jpg" alt="2"> 
     <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/3.jpg" alt="3"> 
    </div> 
    <div id="buttons"> 
     <button id="left">prev</button> 
     <button id="right" onclick="next()">next</button> 
    </div> 
</div> 

<script> 

goRight=1; 

function next() { 
    // body... 

    interval =setInterval(Slide,2); 

} 

function Slide() { 
    // body... 
    var img=document.querySelectorAll("#img-holder img"); 
    for(i=0;i<img.length;i++){ 
     img[i].style.right=goRight+"px"; 
    } 

    goRight=goRight+1; 
    console.log(goRight) 

    if((goRight-1)%870==0){ 


     clearInterval(interval); 
     goRight=1; 
    } 
} 

</script> 

Answer 1

nächste Funktion ändern, weil Sie goRight zurückgesetzt, sobald Sie eine Scroll beendet haben.

if((goRight-1)%870==0){ 
    clearInterval(interval); 
    // goRight=1; // <-- this is your problem 
} 

Sie brauchen einen besseren Zustand verwenden goRight zurückgesetzt, sobald Sie es bis zum Ende der Galerie gemacht haben, vielleicht einen anderen var verwenden, die das Bild, das Sie auf

sind zählt

<style> 
    #container{ 
     width: 870px; 
     height: 540px; 
     overflow: hidden; 
     margin: 0 auto; 
    } 
    #img-holder{ 
     width: calc(870px*3); 
    } 
    img{ 
     float: left; 
     position: relative; 
    } 
</style> 


<div id="container"> 
    <div id="img-holder"> 
     <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/1.jpg" alt="1"> 
     <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/2.jpg" alt="2"> 
     <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/3.jpg" alt="3"> 
    </div> 
    <div id="buttons"> 
     <button id="left">prev</button> 
     <button id="right" onclick="next()">next</button> 
    </div> 
</div> 

<script> 

var goRight=1,visible_index = 1; 

function next() { 
    // body... 
    visible_index++ 

    interval =setInterval(Slide,2); 

} 

function Slide() { 
    // body... 
    var img=document.querySelectorAll("#img-holder img"); 
    for(i=0;i<img.length;i++){ 
     img[i].style.right=goRight+"px"; 
    } 

    goRight=goRight+1; 
    console.log(goRight) 

    if((goRight-1)%870==0){ 


     clearInterval(interval); 
     if(visible_index == img.length) 
       goRight=1; 
    } 
} 

</script>