javascript 使用javascript自动更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17812877/
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
changing images automatically with javascript
提问by AJ Basson
I have the current JavaScript problem. I have four divisions next to each other on my website that constantly rotate images on a 10 seconds interval. I need these intervals to keep rotating images at the current interval but start 5 seconds apart from each other in order to obtain a nice waterfall effect. How can I accomplish this using JavaScript?
我有当前的 JavaScript 问题。我的网站上有四个相邻的分区，它们以 10 秒的间隔不断旋转图像。我需要这些间隔以当前间隔保持旋转图像，但开始时彼此间隔 5 秒以获得不错的瀑布效果。如何使用 JavaScript 完成此操作？
image of how it looks on my websites' header
This is an example of the code I am currently using to display a single division and handle the rotation of the images.
这是我目前用于显示单个分区并处理图像旋转的代码示例。
<div class = "TestRotator">
<img src="http://bushveld.info/wp-content/uploads/2013/07/image1.png" alt="rotating" width="100" height="232" id="rotator">
<script type="text/javascript">
(function () {
var rotator = document.getElementById('rotator'); // change to match image ID
var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';
var delayInSeconds = 5;
// set number of seconds delay
// list image names
var images = ['image2.png', 'image3.png', 'image4.png'];
var num = 0;
var changeImage = function () {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
</div>
采纳答案by Teemu
If I've understood your question correctly, you need something like this:
如果我正确理解了你的问题，你需要这样的东西：
window.onload = function () {
var // Customable parameters
imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/',
interval = 2, // Interval between "flushes" in seconds. Must be > speed * maxScreens
speed = 0.1, // "Flush" speed in seconds
maxScreens = 4, // amount of used image tags
images = 4, // amount of image sources, can be > maxScreens
dir = 1, // 1 = from left to right, -1 = from right to left
// Program
flush,
target = (dir > 0) ? 1 : maxScreens,
targetOrigo = target,
changeImage = function() {
var img = document.getElementById('rotator' + target),
id = parseInt(img.src.substr(img.src.length - 5, 1), 10) - dir;
if (id < 1) {
id = images;
}
if (id > images) {
id = 1;
}
img.src = imageDir + 'image' + id + '.png';
if (target !== maxScreens - targetOrigo + 1) {
target += dir;
setTimeout(changeImage, speed * 1000);
} else {
target = targetOrigo;
setTimeout(runRotation, interval * 1000);
}
return;
},
runRotation = function () {
setTimeout(changeImage, speed * 1000);
};
setTimeout(runRotation, 1000);
}
Notice, that I've put the function at window.onload, looks better when all the images are already loaded, before the rotation starts.
请注意，window.onload在旋转开始之前，当所有图像都已加载时，我将函数放在, 看起来更好。
The snippet doesn't use setInterval()at all, instead it's based on nested setTimeout()s. This way you can avoid a mess, which you might get (depends on used browser), if user visits at other tab and then comes back to your site.
该代码段根本不使用setInterval()，而是基于嵌套的setTimeout()s。如果用户访问其他选项卡然后又回到您的网站，这样您就可以避免出现混乱（取决于使用的浏览器）。
You can play with interval, "flush" speed, number of images you have on the rotation and even how many different images you like to use (max. = 9). You can also switch the direction of the rotation.
您可以使用间隔、“刷新”速度、旋转时的图像数量，甚至您喜欢使用的不同图像数量（最多 = 9）。您还可以切换旋转方向。
If you want to avoid two similar images to be shown at the same time, you can add image5.pngto your image folder, and set images = 5.
如果您想避免同时显示两个相似的图像，您可以添加image5.png到您的图像文件夹，并设置images = 5.
Also versionusing an image source array available.
也版本使用图像源阵列可用。
回答by Hristo Valkanov
I've fiddled it a lot! (I changed it big time.)
我已经摆弄了很多！（我改变了很大的时间。）
chenged setInterval()with setTimeout()and many others.
chengedsetInterval()用setTimeout()等等。
Is thiswhat you wanted?
就是这个，你想要什么？
PS: stateholds the 1st image to which the imgs change. and the difference in the timeout (200 milliseconds is in order to just to make some difference in between them, yuo can change it to a round number if you want to).
PS：state保存 imgs 更改为的第一个图像。以及超时的差异（200 毫秒只是为了在它们之间产生一些差异，如果您愿意，可以将其更改为整数）。
回答by AJ Basson
Thanx alot for the input. I solved this issue by adapting the code in this manner...
非常感谢输入。我通过以这种方式调整代码解决了这个问题......
(function() {
var rotator3 = document.getElementById('rotator3'); // change to match image ID
var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';
// set number of seconds delay
// list image names
var images = ['image2.png', 'image3.png', 'image4.png', 'image1.png'];
// don't change below this line
var num = 0;
var changeImage = function()
{
var len = images.length;
rotator3.src = imageDir + images[num++];
if (num == len)
{
num = 0;
}
};
function SwImg() {
var rotate = setInterval(changeImage, 20000);
}
setTimeout(SwImg,15000);
})();
This tweak basically creates an initial delay of 5++ seconds at each division with the standard 20 seconds delay interval between switches, rotating each image in each division 5 seconds after the other. Here is a link to the website, will be done end of this week. Thanks again for the input, really awesome and creative ways of solving this issue!
这种调整基本上在每个分区创建了 5++ 秒的初始延迟，开关之间的标准延迟间隔为 20 秒，每个分区中的每个图像依次旋转 5 秒。这是该网站的链接，将在本周末完成。再次感谢您的投入，解决此问题的方法非常棒且富有创意！
Cheers
干杯
