Javascript 每 30 秒更改一次图像 - 循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3264739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image change every 30 seconds - loop
提问by Latze
I would like to make an image change after 30 seconds...
我想在 30 秒后更改图像...
The code I'm using looks like this:
我正在使用的代码如下所示：
Script:
脚本：
var images = new Array()
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x=0;
function changeImage()
{
document.getElementById("img").src=images[x]
x++;
}
And the body:
还有身体：
<img id="img" src="startpicture.jpg">
Now I haven't tested this one yet, but if my calculations are correct it will work :)
现在我还没有测试过这个，但如果我的计算是正确的，它将起作用:)
Now what I also want is to make a "fading transition" and I would like the changing of images to loop (it restarts after all the images have been shown). Do any of you guys know how to do that? I don't :)
现在我还想要做一个“淡入淡出的过渡”，我希望改变图像循环（在显示所有图像后重新启动）。你们有人知道怎么做吗？我不 ：）
回答by Loktar
I agree with using frameworks for things like this, just because its easier. I hacked this up real quick, just fades an image out and then switches, also will not work in older versions of IE. But as you can see the code for the actual fade is much longer than the JQuery implementation posted by KARASZI István.
我同意为这样的事情使用框架，只是因为它更容易。我很快就解决了这个问题，只是淡出图像然后切换，在旧版本的 IE 中也不起作用。但是正如您所看到的，实际淡入淡出的代码比 KARASZI István 发布的 JQuery 实现要长得多。
function changeImage()
{
var img = document.getElementById("img");
img.src = images[x];
x++;
if(x >= images.length){
x = 0;
}
fadeImg(img, 100, true);
setTimeout("changeImage()", 30000);
}
function fadeImg(el, val, fade){
if(fade === true){
val--;
}else{
val ++;
}
if(val > 0 && val < 100){
el.style.opacity = val / 100;
setTimeout(function(){fadeImg(el, val, fade);}, 10);
}
}
var images = [],
x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
回答by KARASZI István
You should take a look at various javascript libraries, they should be able to help you out:
您应该查看各种 javascript 库，它们应该能够帮助您：
All of them have tutorials, and fade in/fade out is a basic usage.
都有教程，淡入淡出是基本用法。
For e.g. in jQuery:
例如在 jQuery 中：
var $img = $("img"), i = 0, speed = 200;
window.setInterval(function() {
$img.fadeOut(speed, function() {
$img.attr("src", images[(++i % images.length)]);
$img.fadeIn(speed);
});
}, 30000);
回答by Arvind Naladiga Venkat
setInterval function is the one that has to be used. Here is an example for the same without any fancy fading option. Simple Javascript that does an image change every 30 seconds. I have assumed that the images were kept in a separate images folder and hence _images/ is present at the beginning of every image. You can have your own path as required to be set.
setInterval 函数是必须使用的函数。这是一个相同的示例，没有任何花哨的淡入淡出选项。每 30 秒更改一次图像的简单 Javascript。我假设图像保存在单独的图像文件夹中，因此 _images/ 出现在每个图像的开头。您可以根据需要设置自己的路径。
CODE:
代码：
var im = document.getElementById("img");
var images = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg"];
var index=0;
function changeImage()
{
im.setAttribute("src", images[index]);
index++;
if(index >= images.length)
{
index=0;
}
}
setInterval(changeImage, 30000);
回答by Ketan Patil
Just use That.Its Easy.
只需使用它。它很简单。
<script language="javascript" type="text/javascript">
var images = new Array()
images[0] = "img1.jpg";
images[1] = "img2.jpg";
images[2] = "img3.jpg";
setInterval("changeImage()", 30000);
var x=0;
function changeImage()
{
document.getElementById("img").src=images[x]
x++;
if (images.length == x)
{
x = 0;
}
}
</script>
And in Body Write this Code:-
并在正文中编写此代码：-
<img id="img" src="imgstart.jpg">
