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

Question

我正在尝试使用纯JavaScript 构建自己的轮播.

我正在努力寻找最有效的方式来添加一个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
    }
}