带有香草JavaScript的无限旋转木马

Question

我正在尝试使用纯JavaScript构建自己的 carousel 。

我正在努力寻找最强的高效方式来添加infinite carousel选项。

由于某些原因，每个元素（照片，通用对象）都必须有id

我看到的算法是这样的：

• 检查旋转木马是否溢出（足够的物体 整个容器）
• 如果不是：然后将第一个元素的副本附加到后面 第二个元素的副本，依此类推。 （但是id会有问题，因为这个对象将具有相同的id）

  - 如果用户滚动到最后一个对象（向右），则追加    第一个DOM对象到数组后面
  - 如果用户正在滚动到    第一个对象（左）然后将最后一个DOM子项添加到数组    前面。

这会起作用吗？有没有其他有效的方法来做一个无限的轮播？

我也听说使用translate属性而不是更改左右属性会更好，因此GPU的工作量会比CPU更多。

Answer 1

我用css转换创建了一个简单的滑块作为动画技术和普通的Javascript。

var img = document.getElementsByClassName("img")[0]; 
img.style.transform = 'translate('+value+'px)';

您可以在此codepen代码段中对其进行测试。 http://codepen.io/TobiObeck/pen/QKpaBr

按下按钮可沿x轴在相应方向上平移所有图像。边缘上的图像设置为透明outerImg.style.opacity = '0';并转换为另一侧。您可以在HTML中添加或删除图像元素，但它仍然有效。

在第二个codepen片段中，您可以看到它是如何工作的。 opacity设置为0.5，因此可以观察到哪个图像切换侧面。由于删除了overflow: hidden，您可以看到边缘上的图像如何在另一侧排队。 http://codepen.io/TobiObeck/pen/WGpdLE

此外，在动画完成时检查它是不值得的，否则同时添加的翻译看起来会很奇怪。因此，除非动画完成，否则点击不会触发另一个动画。

img.addEventListener("transitionend", transitionCompleted, true);

var transitionCompleted = function(){
    translationComplete = true;
}

leftBtnCLicked(){
    if(translationComplete === true){
       //doAnimation
    }
}