[英]How to set up an array of images and loop through them individually
This is probably fairly simple task for someone more experienced with javascript. 对于使用JavaScript的人来说,这可能是相当简单的任务。 I'd like to have an array of images and then loop through them to display each one with a certain interval of time between each one. 我想要一个图像数组,然后遍历它们以在每个图像之间保持一定的时间间隔显示每个图像。
I know I could use a plugin, but I'm trying to learn javascript so I want to avoid taking shortcuts(except of course the shortcut of asking for help on here!) 我知道我可以使用插件,但是我正在尝试学习JavaScript,所以我想避免使用快捷方式(当然,在这里寻求帮助的快捷方式除外!)
Thanks 谢谢
var img;
for(length)
{
img[i]=new Image();
img[i].src="src";
}
//for storing image as a array //用于将图像存储为数组
var count=0;
var timerid = setInterval(function()
{
//fade in image
count++;
if(count > length)clearInterval(timerId);
}, 1000);
Better option is add all the image to DOM on image.onload with a display:none tag and then use a loop to fade in the image one by one, 更好的选择是使用display:none标签将所有图像添加到image.onload上的DOM中,然后使用循环逐个淡入图像,
Another option is to use a closure for the counter. 另一种选择是对计数器使用闭包。 Counters are most elegantly implemented as closures. 计数器最优雅地实现为闭包。
// Wrapping the code in a self envoking function prevents polluting the global namespace.
(function() {
// The images array.
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
// The counter function using a closure.
var add = (function() {
// Setting the counter to the last image so it will start with the first image in the array.
var counter = images.length - 1;
return function() {
// When the last image is shown reset the counter else increment the counter.
if(counter === images.length - 1) {
counter = 0;
} else {
counter+=1;
}
return counter;
}
})();
// The function for changing the images.
setInterval(
function() {
console.log(images[add()]);
}
, 1000);
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.