Javascript 图像幻灯片放映循环

标签 javascript html image slideshow

我有幻灯片的代码。 但是我想要做的是加载一个输入框,供用户输入文件夹的名称,然后在页面上找到该文件夹​​并显示该文件夹中的每个图像。 我设法通过两个不同的页面做到了这一点,一个带有输入框,另一个显示图像。

但是我不想对图像源进行硬编码,因为我希望网页在服务器上运行,但不同的幻灯片放映可能在公司的不同地方运行。根据我所做的研究,我认为我需要一个 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> 

最佳答案

看起来它可能有效。

关于样式,您可以将图像放入数组中以摆脱 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); once 而不是 setTimeout。

关于Javascript 图像幻灯片放映循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12618775/

相关文章:

javascript - 如何获取跨度标签的值

javascript - 返回时,复选框未取消选中

css - 流体图像,在宽度流体 DIV 内垂直对齐(中间)

javascript - 如何将变量传递到 HttpRequest 中?

javascript - 为什么 boolean 原语不调用原型(prototype) toString()?

javascript - 在选定区域中取消选择后获取插入符位置

javascript - jQuery slideToggle 不工作,使用显示 : none

javascript - 无法获得 Canvas 的准确尺寸

c++ - C++中的三维数组

javascript - 有没有办法让用户在上传到服务器之前查看他们要上传客户端的图像?