我有幻灯片的代码。 然而,我想要做的是加载一个输入框,供用户输入文件夹的名称,然后页面找到该文件夹并显示该文件夹中的每个图像。 我设法通过两个不同的页面来实现这一目标,一个是输入框,另一个是显示图像。
但是我宁愿不对图像源进行硬编码,因为我希望网页在服务器上运行,但不同的幻灯片可能会在公司的不同位置运行。从我已经完成的研究中我认为我需要一个for循环,循环遍历文件夹中的每张图片但不是100%肯定。这是我到目前为止所得到的:
我已经传入了上一页的文件夹名称。但正如你所看到的那样,图像路径仍然是硬编码的。我希望for循环遍历每张图片并在网页上显示所有图片,无论它们在哪里/只要输入正确的数量文件夹/幻灯片名称。由于图像文件夹将全部位于网络路径上的相同位置。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var first = getUrlVars()["SlideShowTest"];
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
//alert(first)
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
</script>
</body>
</html>
答案 0 :(得分:1)
看起来可能有用。
关于样式,您可以将图像放入数组中以消除eval:
var images= [];
var image;
image= new Image();
image.src= '...';
images.push(image);
for(var i=0; i<images.length; ++i) {
image= images[i];
...
}
最好使用setInterval(“slideit()”,2500);一次而不是setTimeout。