Javascript图像滑块setInterval（）

我正在制作一个简单的图像滑块，它在包含图像的目录中运行。这些图像被称为“img_1”、“img_2”和“img_3”，所以关键是要对它们进行迭代。我不明白的是如何实现一个间隔。我希望图像显示3秒钟，然后更改。“imgSlider”功能在车身负载上

编辑：我正在寻找简单的解决方案（纯JS），因为我目前正在学习JS。很抱歉没有在问题中澄清这一点。这里有很多好答案

function changeImg(img, i){
 img.setAttribute("src", "img/slider/img_" + i + ".jpg");
}

function imgSlider(){
 var img = document.createElement("img");
 var targetDiv = document.getElementById("slider");

 img.setAttribute("width", "100%");
 img.setAttribute("height", "70%");

 targetDiv.appendChild(img);

 for(i=1; i<4; i++){
     setInterval(changeImg(img, i), 3000);
  }
}

功能更改img（img，i）{
setAttribute（“src”、“img/slider/img_”+i+”.jpg”）；
}
函数imgSlider（）{
var img=document.createElement（“img”）；
var targetDiv=document.getElementById（“滑块”）；
img.setAttribute（“宽度”、“100%”）；
img.setAttribute（“高度”、“70%”）；
targetDiv.appendChild（img）；
对于（i=1；i您需要做的很简单，您必须像这样更改
setInterval
代码：


$（函数（）{
var curImg=1；
setInterval（函数（）{
$（“img”）.attr（“src”），“//placehold.it/100？text=“+++curImg”）；
}, 2000);
})；

你可以这样做。
初始化一个计数器，它将跟踪当前要显示的图像。现在我们只需要调用showImage函数，它将显示与计数器当前值对应的图像

每3秒重复一次

var count = 0; 
setInterval( function() { 
   showImage(count); 
   count = (count+1)%total_no_of_images
}, 3000)

setInterval
获取函数时，您需要向其传递一个函数的引用，该函数将以适当的间隔运行

另外，请注意，在撰写本文时，公认的答案假设存在无限图像，并且具有“无限循环”的间隔样式，如果可能的话，应该避免这种情况

const changeImg = (img, i) => {
   img.setAttribute('src', `img/slider/img_${i}.jpg`);
};

const imgSlider = () => {
    const img = document.createElement('img');
    const targetDiv = document.getElementById('slider');

    img.setAttribute('width', '100%');
    img.setAttribute('height', '70%');

    targetDiv.appendChild(img);

    let i = 0;

    const interval = setInterval(
        () => {
            changeImg(img, i);
            i += 1;
            if (i > 4) {
                clearInterval(interval);
            }
        },
        3000
    );
};

看起来不错，但不幸的是我不知道如何用ajax编写代码。这可能对任务有用，但我不想偷懒，因为我正在学习javascript。1+不过，也许你可以用普通javascript编写？@saltcracker哈哈……现在，你需要手动编写，因为要知道图像是否存在，你需要ajax或se服务器端调用。@saltcracker你能使用jQuery吗？我可以帮你写AJAX。谢谢，纯JS版本看起来不错。我会尝试使用这种方法。我会做：）15个字符沙哈！！！ES6函数：）他提到他正在尝试学习JS。这个符号可能会让他感到困惑：感谢你的贡献。虽然它看起来更高级了，但我的缺点是没有注意到我目前正在学习初级javascript。我会看一看，也许我会从中学到一些东西实际上：）你可以用它来传输到普通的JS。别担心，ES6语法在这里基本上是不相关的。如果有帮助的话，很乐意进行ES5翻译。在你看来，只需将
const
替换为
var
，将
=>{}
替换为
函数（）{}
。