Javascript 无限水平滑块具有不同的上一个和下一个动画

我有一个滑块，可以有一个未定义的项目数量，可以通过两个按钮滚动

这个prev和next函数都有相同的基本思想，即获取所需的项目并放置在div的末尾或开头，然后使用左边距设置动画。请参阅下面的代码

问题：只要缓慢按下按钮，两个屏幕上的动画都是相同的。 但是，由于某些原因，如果快速按下按钮，则这两种功能的动画不同

对于下一个函数，它是一个阶梯动画。 对于上一个动画，它是一个平滑的动画，但在转换期间它确实与相邻项重叠

var slider=document.getElementById（'wrapper'）；
var currentPosition=0；
var elementCount=slider.childElementCount；
（功能（）{
让brand=slider.getElementsByClassName（'brands-brand'）[elementCount-1]；
slider.insertBefore（品牌、slider.firstChild）；
brand.style.marginLeft='-10%'；
})();
window.myFunctionNext=函数（）{
设brand=slider.getElementsByClassName（'brands-brand'）[0]；
brand.style.marginLeft='0px'；
滑块。附属品（品牌）；
slider.getElementsByCassName（'brands-brand'）[0].style.marginLeft='-10%；
开始=错误；
}
window.myFunctionPrev=函数（）{
让brand=slider.getElementsByClassName（'brands-brand'）[elementCount-1]；
brand.style.marginLeft='-10%'；
slider.insertBefore（品牌、slider.firstChild）；
slider.getElementsByClassName（'brands-brand'）[1].style.marginLeft='0%'；
}

.brands包装器{
空白：nowrap；
溢出：隐藏；
字号：0；
位置：相对位置；
宽度：1000px；
边框：1px纯黑；
框大小：边框框；
}
.品牌下滑{
位置：相对位置；
左：0；
排名：0；
框大小：边框框；
}
.品牌{
过渡期：所有0.6秒缓解；
显示：内联块；
z指数：1；
宽度：10%；
字号：中等；
字号：首字母；
左侧填充：10px；
右边填充：10px；
边框：1px纯红；
框大小：边框框；
}
img{
宽度：100%；
高度：150像素；
对象匹配：包含；
}

上
下一个

当很快按下Next/Prev按钮时，javascrpit会在CSS转换完成之前更改DOM。这会在向右滚动时导致异步转换。向左滚动时，最左侧的元素（仍处于边距转换过程中）在转换完成之前从DOM中移除，因此新的最左侧元素将捕捉到位。在新的最左侧元素中没有更改CSS属性，因此不应用任何转换

您应该能够通过向代码中添加控制机制来实现您的目标，该机制确保在当前转换完成之前不会修改DOM

如果将以下javascript添加到现有代码中，则应提供一种持续同步滚动的机制，直到达到所需的滚动目标

var animation = 0;                              // Which way and how many tiles to rotate
var animate_active = false;                     // Run status

window.myFunctionStart = function() {
    if ( !animate_active ) {                    // Do not start if already running
        setTimeout(myFunctionAnimate, 1);       // Start callback
        animate_active = true;                  // Sets running flag
    }
}

window.myFunctionAnimate = function() {
    if ( animation < 0 ) {                      // If direction = Prev
        myFunctionPrev();                       // Execute transition
        animation += 1;                         // Itterate towards 0
        setTimeout(myFunctionAnimate, 600);     // Continue callback at 0.6s intervals ( should match css transition )
    }
    else if ( animation > 0 ) {                 // If direction = Next
        myFunctionNext();                       // Execute transition
        animation -= 1;                         // Itterate towards 0
        setTimeout(myFunctionAnimate, 600);     // Continue callback at 0.6s intervals ( should match css transition )
    }
    else animate_active = false;                // If no more animations required, stop callback
}

var animation=0；//旋转的方向和数量
var animate_active=false；//运行状态
window.myFunctionStart=函数（）{
如果（！animate_active）{//如果已经运行，则不要启动
setTimeout（myFunctionAnimate，1）；//启动回调
animate_active=true；//设置运行标志
}
}
window.myFunctionAnimate=函数（）{
如果（动画<0）{//如果方向=上一个
myFunctionPrev（）；//执行转换
动画+=1；//向0倾斜
setTimeout（myFunctionAnimate，600）；//以0.6s的间隔继续回调（应匹配css转换）
}
如果（动画>0）{//如果方向=下一步
myFunctionNext（）；//执行转换
动画-=1；//向0倾斜
setTimeout（myFunctionAnimate，600）；//以0.6s的间隔继续回调（应匹配css转换）
}
else animate_active=false；//如果不再需要动画，请停止回调
}

要使用此代码，下一个和上一个按钮应如下所示

<button onclick="animation -= 1; myFunctionStart();">Prev</button>
<button onclick="animation += 1; myFunctionStart();">Next</button>

Prev
下一个

---

您可能还希望将CSS转换从

ease

更改为

linear

，否则转换将看起来不稳定。

感谢您使用普通javascript编写动画。这就是我求助于jQuery的原因，因为它简化/规范了很多细节…@cale_b，上周只使用香草，这让我真正了解jQuery为您节省了多少时间。遗憾的是，这个项目需要在没有它的情况下完成。感谢您的详细解释和建议，这非常有帮助！