如何通过Vue.js在JavaScript中循环使用表格制作的旋转木马

我试图使用table创建一个定制的旋转木马，但在点击最后一个标记（在本例中，最后一个标记表示

td

元素的最后一个）之后，我对如何创建旋转木马循环感到非常困惑。目前，我已经成功地使它自动播放，但我很困惑如何使它循环时，自动播放达到最后一项

供您参考，我正在使用Vue.js制作这个，这是

这是我的模板：

科德佩萨南

：

Putih（TS1）、Hitam（TS2）、海军（TS3）


Deskripsi

：

Lorem ipsum dolor sit amet Concertetur，
再见。诺斯特朗，波罗！伊洛
分子排斥剂
我是特尼特·奈斯坎特，ea，similique
消费者？显式裂谷
你是谁？

Harga
：
80.000卢比
乌克兰

：
XS-XXL

这是我的风格：

。商品项目包装{
溢出：隐藏；
溢出-x：自动；
}
.商品表{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
}
.商品表td{
填充：0px 8px；
宽度：100%；
最小宽度：380px；
最大宽度：400px；
}
.物品商店{
变换：比例（0.75）；
}
.item-store.active{
变换：比例（1）；
}

以下是我实现自动播放的方法：

方法：{
itemSlider（）{
让autoScroller=document.getElementById（“customWrapper”）；
让item=autoScroller.getElementsByTagName（“td”）；
设乘数=0；
设imgScaller=0；
设imgPointer=0；
setInterval（函数（）{
log（“cek开始：”，乘数）；
if（项[imgPointer+1].classList！=未定义）{
autoScroller.style.transform=`translateX（${-380*multiplier}px）`；
}
for（设i=0；i

---

在打到最后一个部分后，我很困惑如何找到循环我的卡的方法，目前，我只能将其移回第一个位置。

最后我可以解决这个问题，这个答案适用于与我有相同问题的您

对于无限循环，您需要通过克隆要附加动态索引的元素（在我的例子中）来解决它，所以我调整代码直到如下所示

    itemSlider() {
      let autoScroller = document.getElementById("customWrapper");
      let item = autoScroller.getElementsByTagName("td");
      let multiplier = 0;
      let imgScaller = 0;
      setInterval(function() {
        if (item[imgScaller + 1].classList != undefined) {
          autoScroller.style.transform = `translateX(${-380 * multiplier}px)`;
        }

        if (imgScaller - 1 != -1 && imgScaller != 0) {
          let firstSlide = item[imgScaller - 1];
          let cloneFirst = firstSlide.cloneNode(true);
          autoScroller.appendChild(cloneFirst);
        }

        if (imgScaller) {
          item[imgScaller + 1].classList.add("active");
        }
        if (imgScaller - 1 != -1) {
          item[imgScaller].classList.remove("active");
          item[imgScaller - 1].classList.remove("active");
        }

        multiplier++;
        imgScaller++;
      }, 3000);
    }

但如果你知道我只是想知道，如果你从性能上看，我的代码已经足够了吗？由于我只添加了它，没有删除最旧的一个？，如果你能优化它，它将帮助我很多，谢谢