纯Javascript中的增减值

我正在尝试用纯Javascript和CSS开发一个非常简单的旋转木马。“下一步”和“上一步”按钮有问题，因为它们应该相互通信，设置转盘的当前位置

这是我当前的代码（或JSFIDLE:）：

//滑块
var listRecommensions=document.getElementById（'list-Recommensions'）；
listRecommensions.style.left=0；
//上一个按钮
document.getElementById（“btn prev”）.onclick=function（）{
//如果是滑块的0px，请确保此功能不会运行
if（parseInt（listRecommensions.style.left）！=0）{
var currentPosition=parseInt（listRecommensions.style.left）+100；
listRecommensions.style.left=当前位置+'px'；
控制台日志（当前位置）；
};
}
//下一个按钮
var num=100；
var maxValue=1000+120；
console.log（maxValue）；
document.getElementById（“btn next”）.onclick=function（）{
if（num

#列表建议{
位置：绝对位置；
}
.包装物品.物品{
浮动：左；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
以前的
下一个

检查此更新

//上一个按钮
document.getElementById（“btn prev”）.onclick=function（）{
//如果是滑块的0px，请确保此功能不会运行
var currentPosition=parseInt（listRecommensions.style.left）-100；
listRecommensions.style.left=当前位置+'px'；
控制台日志（当前位置）；
}
//下一个按钮
var num=100；
var maxValue=1000+120；
console.log（maxValue）；
document.getElementById（“btn next”）.onclick=function（）{
if（num

---

基本上每次都需要取

左

值，并在其上加上（

+

下一步）减（

-

上一步）。

没有使用

num

，因为您可以使用元素的当前位置

另请注意，

-

将把

-

符号连接到值上，而不会减去值

这是：

var maxValue=1000+120；
var listRecommensions=document.getElementById（'list-Recommensions'）；
listRecommensions.style.left=0；
document.getElementById（“btn prev”）.onclick=function（）{
var val=parseInt（listRecommensions.style.left）；
如果（val！=0）{
val-=100；
listRecommensions.style.left=val+'px'；
控制台日志（val）；
};
}
document.getElementById（“btn next”）.onclick=function（）{
var val=parseInt（listRecommensions.style.left）；
if（val

#列表建议{
位置：绝对位置；
}
.包装物品.物品{
浮动：左；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
以前的
下一个

添加一些正在发生的事情和您期望的结果？更好的标题应该是“…不使用框架或外部库”。所有JavaScript代码都是“纯”的，谢谢。那几乎是完美的。在“23”行，我需要它设置负值。因此，每次单击都会导致。。"-100", "-200", "-300". 如果我在这条线上加一个负信号，它就会进入一个100到0之间的循环。有什么想法吗？这里有一个更新的提琴：@BrunoMonteiro你不需要在那一行上加减号，因为在那之前已经在两行上做了算术。谢谢，这与@gurvinder372的方法几乎相同。它工作得很好，但是如果我尝试将新值设置为负值，它会在100和0之间创建一个循环。用一个提琴示例检查此注释：

// Previous button
    document.getElementById("btn-prev").onclick = function() {
        // Making sure this functions will not run if it's the 0px of the slider
            var currentPosition = parseInt(listRecommendations.style.left) - 100;
            listRecommendations.style.left = currentPosition + 'px';
            console.log(currentPosition);
    }

    // Next button
    var num = 100;
    var maxValue = 1000 + 120;
    console.log(maxValue);

    document.getElementById("btn-next").onclick = function() {
        if (num < maxValue) {
            var currentPosition = parseInt(listRecommendations.style.left) + 100;
            num = currentPosition;
            listRecommendations.style.left =  num + 'px';
            console.log(num);
        };
    }