Javascript 通过每次单击添加一个数字来动态转换3D

大家好，我正在尝试模拟滑块中的箭头，在滑块中我将元素向左和向右移动

到目前为止，我有项目移动到右边，但只有一次

这是到目前为止我的代码

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    const now = "740";

    arrowRight.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d(" + -now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d("+ +now+", 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>

（功能（）{
const arrowLeft=document.querySelector（“#视频标签左”）；
const arrowRight=document.querySelector（“#视频标签右”）；
const tags=document.querySelector（'.video tags'）；
const now=“740”；
arrowRight.addEventListener（“单击”，函数（）{
$（标记）.css({
“转换”：“translate3d”（+-now+“px，0px，0px）”，
“变换样式”：“保留-3d”
});
});
箭头左键。addEventListener（“单击”，函数（）{
$（标记）.css({
“transform”：“translate3d（“++now+”，0px，0px）”，
“变换样式”：“保留-3d”
});
});
}());

所以我现在尝试添加和删除

，单击时为740，所以每次单击右键时添加740，单击左键时删除，直到重置为0px

因此，我再次单击鼠标右键740、1460等，当用户单击左箭头时，则单击鼠标右键。
每次单击其中一个箭头时，您现在应该增加/减少
的值。
：

<script>
    (function(){
        const arrowLeft = document.querySelector('#video-tags-left');
        const arrowRight = document.querySelector('#video-tags-right');
        const tags = document.querySelector('.video-tags');
        const SLIDER_WIDTH = 740;
        let now = 0;

        arrowRight.addEventListener("click", function() {
            now -= SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d(" + now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });

        arrowLeft.addEventListener("click", function() {
            now += SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d("+ now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });
    }());
</script>


（功能（）{
const arrowLeft=document.querySelector（“#视频标签左”）；
const arrowRight=document.querySelector（“#视频标签右”）；
const tags=document.querySelector（'.video tags'）；
常数滑块_宽度=740；
现在设=0；
arrowRight.addEventListener（“单击”，函数（）{
现在-=滑块宽度；
$（标记）.css({
“转换”：“translate3d”（+now+“px，0px，0px）”，
“变换样式”：“保留-3d”
});
});
箭头左键。addEventListener（“单击”，函数（）{
现在+=滑块宽度；
$（标记）.css({
“转换”：“translate3d”（+now+“px，0px，0px）”，
“变换样式”：“保留-3d”
});
});
}());

请注意，您还必须检查滑块的限制，以便无法将滑块移动到没有内容的部分。
以下是代码中的一些问题：

您将“now”声明为const，因此其值不能更改
您将“now”声明为类型字符串，因此无法对其进行任何数学运算（例如递增或递减）
将代码更改为：

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    let now = 740; // Declare "now" as variable of type number

    arrowRight.addEventListener("click", function() {
      now += 740; // Increment "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      now -= 740; // Decrement "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>


（功能（）{
const arrowLeft=document.querySelector（“#视频标签左”）；
const arrowRight=document.querySelector（“#视频标签右”）；
const tags=document.querySelector（'.video tags'）；
让now=740；//将“now”声明为number类型的变量
arrowRight.addEventListener（“单击”，函数（）{
now+=740；//将“now”增加740
$（标记）.css({
“转换”：“translate3d”（+now+“px，0px，0px）”，
“变换样式”：“保留-3d”
});
});
箭头左键。addEventListener（“单击”，函数（）{
now-=740；//将“now”减量740
$（标记）.css({
“转换”：“translate3d”（+now+“px，0px，0px）”，
“变换样式”：“保留-3d”
});
});
}());
哦，好的，谢谢你指出问题和我做错了什么，这是一个很大的帮助。这是可行的，我必须点击两次代码才能生效，但当我点击左箭头返回时，位置会重置回0，理想情况下应该返回740，而不是reset@B.J.B你确定你正确地实现了我的代码吗？因为当我尝试它的时候，它是有效的。这是一个工作代码笔-我的意思是，值从740开始单击右箭头控制台中的值和translate向上，但是，当再次单击返回时，控制台编号会更改，但translate中的值不会更改。我只是注意到您的代码中有一个打字错误（因此我发布的代码中也有）. 这：
“transform:“translate3d”（+now+”，0px，0px）”，
应该是：
“transform:“translate3d”（+now+“px，0px，0px）”，
我更新了我的代码。哦，哈哈，那是我的错。还有一件事，有没有可能将状态限制为0，这样我就不能再返回到负数？我该如何检查限制？嗯，左边的限制似乎是初始位置（当
现在
等于0时）。正确的限制取决于您拥有的项目总数和幻灯片中显示的项目数。