バニラJavascriptスライダの問題

Question

私は単純なバニラのJavascriptスライダを作成しようとしていますが、私はいくつかの問題を抱えている、うまくいけば誰かが私を助けることができます。

htmlコード：

<div class="box" id="boxid"> 
     <div class="inside_box" id="inside_box_id"> 
      <ul class="main_ul" id="main_ul_id"> 
       <li class="one" id="oneid"><a href = "#"></a></li> 
       <li class="one" id="twoid"><a href = "#"></a></li> 
       <li class="one" id="threeid"><a href = "#"></a></li> 
       <li class="one" id="fourid"><a href = "#"></a></li> 
       <li class="one" id="fiveid"><a href = "#"></a></li> 
      </ul> 
     </div> <!-- end of inside_box --> 
    </div><!-- end of box --> 

    <button id="previd" class="btn">Prev</button> 
    <button id="nextid" class="btn">Next</button> 

CSSコード：

body { 
    background:grey; 
    font-family: sans-serif; 
} 

.box { 
    width:800px; 
    height:300px; 
    border:1px solid black; 
    margin: 0 auto; 
} 

.inside_box { 
    width:800px; 
    height:300px; 
    padding:0px; 
    margin:0px; 
    overflow: hidden; 
} 

.main_ul { 
    width:4000px; 
    padding:0px; 
    margin:0px; 
} 

.main_ul li { 
    list-style: none; 
    float:left; 
} 

.one { 
    width:800px; 
    height:300px; 
} 

#oneid {background:blue;} 
#twoid {background:orange;} 
#threeid {background:brown;} 
#fourid {background:green;} 
#fiveid {background:purple;} 


.btn { 
    padding:10px; 
    width:100px; 
    margin-left:50%; 
    cursor: pointer; 
    margin-top:10px; 
} 

JSコード

var prevBtn = document.getElementById("previd"); 
var nextBtn = document.getElementById("nextid"); 

nextBtn.addEventListener("click", function(){ 
    var slideLeft = document.getElementById("main_ul_id"); 
    slideLeft.style.marginLeft = "-800px"; 
}, false); 

私は[次へ]ボタンをクリックした瞬間では、第2のスライドに私を取りますが、私はそれをもう一度クリックすると何もしません。クリックすると余分に800pxずつクリックするとどうすればいいですか？

ありがとうございました。

Answer 1

-800pxから現在の値を取得して、を減算する必要があります。

最初に[次へ]ボタンをクリックすると、margin-leftが-800pxに設定され、結果が表示されます。しかし、次回のプレスでは、margin-leftを-800pxと設定します。以下のような

何か：

nextBtn.addEventListener("click", function() { 
    var slideLeft = document.getElementById("main_ul_id"); 
    var style = slideLeft.style; 
    var totalImages = 5; 
    var margin = 800; 

    style.marginLeft = (parseInt(style.marginLeft || "0") - margin)%(totalImages*margin) + "px"; 
}, false); 

(totalImages*margin)で残りを取るが、最後のスライドから次打った後、最初のスライドをもたらすでしょう。最適なロジックではなく、あなたにアイデアを与えてください。

はここで働いてJSFiddleです：https://jsfiddle.net/dsa3du93/7/は