transitionend方法，使用Javascript设置无限滑块的动画

我是这个社区的新成员，首先，我借此机会感谢大家每天所做的精彩工作

我正在尝试创建一个无限的手动旋转木马，采用Netflix风格，这是到目前为止我所做的一切的代码笔链接：

以下是相关的javascript：

    let prendiContenitoreGalleria = document.querySelector('.contenitore-galleria'),
    prendiArticle = Array.prototype.slice.apply(document.querySelectorAll('.contenitore-galleria__article')),
    contaArticle = prendiArticle.length,
    prendiImmagini = Array.prototype.slice.apply(document.querySelectorAll('.contenitori__img')),
    prendiFrecciaSinistra = document.querySelector('.freccia-sinistra'),
    prendiFrecciaDestra = document.querySelector('.freccia-destra');
prendiContenitoreGalleria.style.width = 100 * contaArticle + '%';
for (let numeroImmagini = 0; numeroImmagini < prendiImmagini.length; numeroImmagini++) {
    prendiImmagini[numeroImmagini].style.width = 100 / contaArticle + '%';
}
prendiContenitoreGalleria.insertBefore(prendiArticle[contaArticle - 1], prendiArticle[0]);
prendiContenitoreGalleria.style.marginLeft = '-' + 100 + '%';
function andareADestra () {
    prendiContenitoreGalleria.style.marginLeft = '-' + 200 + '%';
    prendiContenitoreGalleria.style.transitionDuration = '.7s';
    prendiContenitoreGalleria.addEventListener('transitionend', function(e) {
        prendiContenitoreGalleria.appendChild(prendiArticle[0]);
        prendiContenitoreGalleria.style.marginLeft = '-' + 100 + '%';
    }, false);
}
function andareASinistra () {
    prendiContenitoreGalleria.style.marginLeft = 0;
    prendiContenitoreGalleria.style.transitionDuration = '.7s';
    prendiContenitoreGalleria.addEventListener('transitionend', function(e) {
        prendiContenitoreGalleria.insertBefore(prendiArticle[contaArticle - 1], prendiArticle[0]);
        prendiContenitoreGalleria.style.marginLeft = '-' + 100 + '%';
    }, false);
}
prendiFrecciaSinistra.addEventListener('click', function () {
    andareASinistra();
});
prendiFrecciaDestra.addEventListener('click', function () {
    andareADestra();
});

让prendicontenetoregalleria=document.querySelector（'.contenitore-galleria'），
prendiArticle=Array.prototype.slice.apply（document.querySelectorAll（'.contenitore-galleria_uuarticle'）），
contaArticle=prendiArticle.length，
prendimmagini=Array.prototype.slice.apply（document.querySelectorAll（'.contentitori\uu img'）），
prendifreciasisistra=document.querySelector（'.freccia sinistra'），
prendifreciadestra=document.querySelector（'.freccia desta'）；
Prendicontenetoregalleria.style.width=100*contaArticle+“%”；
for（设numeriommagini=0；numeriommagini

我曾尝试使用vanilla Javascript transitionend事件，我想要实现的是，当单击旋转木马的右箭头时，第一篇文章将取代第三篇，反之亦然，当单击旋转木马的左箭头时，最后一篇文章将取代第一篇

为此，我使用marginLeft在旋转木马中的文章（3）和包含它们的div（3）之间移动，div的宽度通过JavaScript设置为300%

我的问题是，当我点击旋转木马箭头时，转换完成了，但它会产生一种奇怪的效果，立即返回到其原始位置

---

你们中的任何一位都可以帮助我找出我错在哪里以及如何修复它？

在您的两个函数中，向左和向右移动，

和reasinistra

以及

和readestra

您正在为

transitionend

事件添加事件侦听器

此操作的处理程序是通过在每次向左或向右移动后将其重置为

-100%

来删除左边距偏移量

您可以通过编辑

id=“contenitore galleria”

元素的内联样式来确认这是一个问题，如果设置

style=“margin left:0”

，则旋转木马将移动，然后返回到

-100%

位置

所以它发生的原因是因为这是你明确告诉它的！删除

和reasinistra

以及

和readestra

---

rendiContentitoregalleria.style.marginLeft='-'+100+'%
非常感谢您的回答，我刚刚设置了左边距：0；css文件中#contenitore galleria元素的css属性，但问题仍然存在。在我的两个函数andareASinistra和AndReadEstra中，我首先设置了相应的左边距值​​然后，在转换结束时，我报告了左边距的值​​到-100%，以便他们随时向我展示正确的文章。这就是我的错误吗？提前感谢您误解的答案-我的意思是，如果我在代码笔示例中内联更改值（不使用按钮），则旋转木马会弹回来-因为这是您告诉它要做的…请参阅我的编辑。