javascript - 如何在每次点击时将 div 向左 move - 只需 javascript，无需 jquery

Question

我正在尝试从头开始构建幻灯片放映。我只想使用 javascript，而不使用 jquery。

到目前为止，当我单击“上一页”按钮时，它只会向左 move 50px 一次。如何让它每次单击“上一个”按钮时 move 50px。

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

您的第一个问题是 slide 元素没有 left 的当前值，因此即使解析它也会返回 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';
}

Fiddle here