我对轮播，setInterval和style.transform =“ translateX”有问题

问题描述

我不明白为什么该功能在必须显示一个计数器时才起作用，并且如果我要求她翻译一个元素，那么她只能翻译一次。

这是代码，我尝试了很多，但是找不到解决方法：

var i; //  set your counter to 1
var numberOfImages = document.getElementsByClassName("imgs").length;
var imgWidth = window.innerWidth;
    
console.log(numberOfImages);
    
var startIt = setInterval(function() {
    document.getElementById("carouselTrain").style.transform = "translateX(" + -imgWidth + "px)";
    document.getElementById("carouselTrain").style.transitionDuration = "0.5s";
    document.getElementById("carouselTrain").style.transform = "translateX(" + -imgWidth + "px)";
    document.getElementById("carouselTrain").style.transitionDuration = "0.5s";        
},1000);

解决方法

问题是您每次都用相同的值进行翻译。翻译不会累积，这就是为什么您看不到任何更改的原因。

如果您在设置间隔功能中更新imgWidth的值，您将开始看到一些操作。在setInterval函数的底部执行此操作：

imgWidth += imgWidth

carousel javascript