純粋なjavascriptを使用している画像スライダー

Question

純粋なJSをスライドの効果で使用して画像スライダーを作成したいと思います。次のボタンを最初に押すと、最初の画像が左に移動し、2番目の画像が表示されます。なぜ3番目の画像がスライドしないのですか？ あなたがスクロールを終えた後、あなたがgoRightをリセットするので、それがある

<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

次の機能を変更することができます。

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

あなたは、ギャラリーの最後にそれを作った後、あなたは多分あなたは

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

にしている画像をカウント別 varを使用し、 goRightをリセットするために、より良い条件を使用する必要があります