Javascript图像滑块setInterval（）

我正在制作一个简单的图像滑块，通过包含图像的目录运行。这些图像被称为“img_1”，“img_2”和“img_3”，所以重点只是遍历它们。我没有得到的是如何实现一个区间。我想让图像显示3秒钟，然后更改。 “imgSlider”功能在身体负荷上。Javascript图像滑块setInterval（）

编辑：我正在寻找简单的解决方案（纯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); 
    } 
}

来源

2016-12-27 saltcracker

你需要做的很简单，你必须改变setInterval这样的代码：

$(function() { 
 
    var curImg = 1; 
 
    setInterval(function() { 
 
    $("img").attr("src", "//placehold.it/100?text=" + ++curImg); 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="//placehold.it/100?text=1" />

在这里，我已经给了2秒的间隔检查。我只使用jQuery来更新图像。如果你想用普通的JavaScript，它可以通过你的代码。

纯JS版

var curImg = 1; 
 
setInterval(function() { 
 
    document.getElementsByTagName("img")[0].src = "//placehold.it/100?text=" + ++curImg; 
 
}, 2000);

<img src="//placehold.it/100?text=1" />

来源

2016-12-27 21:57:59

看起来不错，但不幸的是我不知道如何在ajax中编码。它可能适用于这项任务，但我不想懒惰，因为我目前正在学习JavaScript。 1+虽然，也许你可以写在纯JavaScript的？ – saltcracker

@saltcracker哈哈......现在，你需要手动完成它，因为要知道图像是否存在，你需要AJAX或服务器端调用。 –

@saltcracker你可以使用jQuery吗？我可以帮你编写AJAX。 –

你可以这样来做。初始化一个计数器，该计数器将保持显示当前图像的轨迹。现在我们需要调用showImage函数来显示与计数器当前值对应的图像。

每3秒重复一次。

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

来源

2016-12-27 22:00:50

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 
    ); 
};

来源

2016-12-27 22:09:40

哈哈！ ES6的功能:)他提到他正在试图学习JS。此符号可能会使他感到困惑：P –

感谢您的贡献。它看起来有点高级，但我不知道我目前在初学者级别学习JavaScript。我会看看它，也许我会最终从中学到一些东西。 :) – saltcracker

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code= 您可以使用它来传输到正常的JS –

Javascript图像滑块setInterval（）

回答

相关问题