Vanilla Javascript 滑块问题答案

【问题标题】：Vanilla Javascript Slider IssueVanilla Javascript 滑块问题
【发布时间】：2016-08-01 09:57:33
【问题描述】：

我正在尝试创建简单的香草 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);

当我单击“下一步”按钮时，它会将我带到第二张幻灯片，但是当我再次单击它时，它什么也没做。当我每次点击它时，我怎样才能做到这一点？

谢谢。

【问题讨论】：

标签： javascript slider

【解决方案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/

【讨论】：