Javascript样式转换语法（用于图像滑块/轮播）

Question

我一直在关注有关Javascript Image Slider的YouTube教程，并且遇到了我希望更好地理解的这一行代码，以便我可以对其进行有效地修改以满足我的网站的需求。

下面是这行：

carouselSlide.style.transform ='translateX（'+（-size *计数器）+'px）';

1. carouselSlide包含图像滑块中的所有图像。

2. size是单个图像的宽度（它们都具有相同的宽度）。

每次按下按钮，

3. 计数器都会增加。

我困惑的主要根源是如何将所有事物连接在一起。我不太明白为什么在translateX参数中必须使用两个单引号（以及为什么将它们放在它们的位置），也不明白为什么必须使用加号。

有人可以帮助我理解语法吗？

Answer 1

'translateX(' + (-size * counter) + 'px)'正在使用固定文本以及size和counter变量中的值构造字符串。在固定文本周围加上引号，并且需要+才能将字符串的各个位添加到单个字符串中。

'translateX('-固定字符串

+-串联器

(-size * counter)-根据变量计算值

+-串联器

'px)'-固定字符串

因此，一旦计算完成，如果我们假设等于100：

'translateX(' + 100 + 'px)'

将其结合在一起可获得：

'translateX(100px)'

由于+通常用于加法，因此可能看起来令人困惑，但是它也用于连接字符串。