var imag = document.getElementById('contentimage');
var imagarr = ["images/contimgtwo.jpg","images/contimg.jpg"]
//var convertimg = imagarr[i].toString();
var runtext = function(){
for (i=0;i<imagarr.length;i++){
imag.src=imagarr[i];
}
}
setTimeout(runtext,5000);
CSS:
#contentimage {
display:block;
top:1600px;
width:500px;
height:400px;
position:absolute;
}
#contentimage:hover {
opacity:0.5;
cursor:crosshair;
}
我正在尝试使用 for 循环制作图像幻灯片,想法是它将提供 .src 路径和数组中的图像路径,但问题是 .src=""方法要求您""所以我不能调用数组,所以它找不到图像,有什么办法解决这个问题吗?
最佳答案
您不应该在 runtext
函数中循环整个数组。这样做你实际上只应用了数组的最后一个值,并且总是显示最后一个图像。这是对您的脚本的修改,可能有效:
var imag = document.getElementById('contentimage');
var imagarr = ["images/contimgtwo.jpg", "images/contimg.jpg"];
var index = 0, interval;
var runtext = function(){
imag.src = imagarr[index];
if(index < imagarr.length-1) {
index += 1;
} else {
index = 0;
}
interval = setTimeout(runtext, 5000);
}
var stopText = function() {
clearTimeout(interval);
}
interval = setTimeout(runtext, 5000);
我添加了一个停止幻灯片放映的功能。您仍然会遍历数组的所有元素,但索引会在每次 runtext
调用时递增。
关于javascript循环图像幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20172316/