如何在每次点击时将div移至左侧-只是javascript no jquery

Question

我正在尝试从头开始制作幻灯片。 我只想使用javascript，而不要使用jquery。

截至目前，当我单击“上一个”按钮时，它仅向左移动了50px。 每次单击“上一步”按钮时，如何使它每次移动50像素。

JavaScript代码：-

function prev() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left - 50;
}

function nxt() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left + 50;
}

HTML：-

<div class="slideshow-wrapper">
    <h1>Slide Show</h1>
    <div class="slideshow-outside-container">
        <div class="slideshow-inner-container" id="slide">
            <ul>
                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>

                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>
            </ul>
        </div>
    </div>

    <div class="slideshow-controls-wrapper">
        <button onclick="prev()" class="prev">Prev</button>
        <button onclick="nxt()" class="nxt">Next</button>
    </div>
</div>

CSS：

body{
font-family: 'tahoma', sans-serif;
font-size: 14px;
color: #999999;
background-color: #cccccc;
}

ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
padding: 0;
display: block;
}

.slideshow-wrapper{
position: relative;
width: 100%;
text-align: center;
}
.slideshow-outside-container h1{
margin-bottom: 30px;
}
.slideshow-outside-container{
position: relative;
display: block;
margin: 0 auto;
padding: 10px;
width: 80%;
height: 150px;
background-color: #ffffff;
overflow: hidden;
}
.slideshow-inner-container{
position: absolute;
top: 12px;
left: 0;
width: 1920px;
height: 140px;
border: 1px solid #000000;
}
.slide{
float: left;
width: 150px;
height: 140px;
margin-right: 20px;
background-color: #eeeeee;
}

.slide1{
background-color: green;
}

.slide2{
background-color: yellow;
}

.slide3{
background-color: red;
}

.slide4{
background-color: blue;
}

.slide5{
background-color: orange;
}

.slideshow-controls-wrapper button{
display: inline-block;
cursor: pointer;
padding: 20px;
}

Answer 1

尝试这个

function prev(){
var val=parseint(document.getElementById('slide').style.left) - 50;
document.getElementById('slide').style.left =  val+"px";
}

编辑

这个答案有一定的局限性。

Answer 2

您的第一个问题是slide元素的左值没有当前值，因此即使解析它也将返回NaN并且不起作用。 您可以parseInt当前值（ 50px解析为50 ），但使用||其默认设置为0 ，然后是+/- 50。

设置该值时，还需要说出它的单位，以“ px”为例。

您可以像某些人建议的那样将值缓存在变量中，但是我真的没有必要。 每次解析的速度都足够快，可以确保函数每次都能实现其预期的功能，并且不会冒储值不同步的风险。

function prev() {
    var val = (parseInt(document.getElementById('slide').style.left, 10) || 0) - 50;
    document.getElementById('slide').style.left = val + 'px';
}

function nxt() {
    var val = (parseInt(document.getElementById('slide').style.left, 10) || 0) + 50;
    document.getElementById('slide').style.left = val + 'px';
}

在这里摆弄