Question

我有以下问题，我试图用javascript解决。我有一个带有css文件中指定的背景图像的div，我希望我的javascript定期更改该图像（让我们说每隔5秒）。

我知道怎么做，问题是我有一个图像文件夹可供选择，用于背面图像。我需要能够将文件名（从图像文件夹中）读入数组，更改div的背景图像，延迟5秒并再次更改。

Answer 1

在你的javascript中，使用像

这样的数组

var images = [ "image1.jpg", "image2.jpg", "image3.jpg" ];

function changeImage() {
    var image = document.getElementById("yourimage");
    image.src=$images[changeImage.imageNumber];
    changeImage.imageNumber = ++changeImage.imageNumber % images.length;

}
changeImage.imageNumber=0;

setInterval(changeImage,5000);

数组中的值应由php生成

Answer 2

你仍然需要php或asp来查询文件夹中的文件。 Javascript将无法“远程”检查文件系统。

您可以在jQuery中执行以下操作：

$.ajax({
  url: 'getFolderAsArrayOfNames.php',
  dataType: 'json',
  success: function(data) {
    for(var i=0;i<data.length;i++) {
      // do what you need to do
    }
  });
});

在你的getFolderAsArrayOfNames.php中，就像这样：

echo "function "
     .$_GET['callback']
     ."() {return "
     .json_encode(scandir('somepath/*.jpg'))
     ."}";

Answer 3

如果您使用 Apache 作为您的网络服务器和
如果可以配置它提供一个默认目录列出您的图像文件夹（使用适当的选项 httpd.conf和/或.htaccess）和
如果你不在乎那个清单所有人都可以使用图片访问您的网站，

然后您不需要PHP 或任何其他服务器端处理。

您可以使用XMLHttpRequest（或jQuery ajax函数，这是一个很好的包装器）来获取该文件夹的列表。响应将是HTML，它看起来像这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 
<html> 
 <head> 
  <title>Index of /demo1/images</title> 
 </head> 
 <body> 
<h1>Index of /demo1/images</h1> 
<pre><img src="/icons/blank.gif" alt="Icon "> <a href="?C=N;O=D">Name</a>                    <a href="?C=M;O=A">Last modified</a>      <a href="?C=S;O=A">Size</a>  <a href="?C=D;O=A">Description</a><hr><img src="/icons/back.gif" alt="[DIR]"> <a href="/demo1">Parent Directory</a>                             -   
<img src="/icons/image2.gif" alt="[IMG]"> <a href="tree.gif">tree.gif</a>                17-Mar-2009 12:58  6.2K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="house.gif">house.gif</a>               17-Mar-2009 12:58  6.5K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="car.gif">car.gif</a>                 02-Mar-2009 15:37  8.4K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="elephant.jpg">elephant.jpg</a>            02-Mar-2009 15:37  3.4K  
<hr></pre> 
<address>Apache/2.0.63 (Unix) Server at zeppo Port 80</address> 
</body></html>

由于此输出非常可预测，您可以尝试使用JavaScript regular expression解析文件名，但是在页面上创建隐藏DIV可能同样简单且更健壮，将HTML响应放入DIV中，然后使用DOM方法查找具有<a href>属性的<img>标记之后的alt="[IMG]"。再一次，使用jQuery Selectors或其他工具包中可用的类似辅助方法将使这种DOM解析变得非常简单。

获得新图片的网址（从href解析）后，您可以使用.style.backgroundImage属性为div设置新的CSS背景。

Answer 4

您无法在服务器上或客户端上读取文件夹的内容。

您可以做的是在服务器端脚本的帮助下阅读文件夹的内容，并在处理页面时将其加载到JavaScript数组。

Answer 5

由于安全原因，您无法使用JavaScript执行任何文件IO，因此无论如何您必须创建一些后端服务，它将使用您文件夹中的可用文件列表更新您。你不必那么努力，你可以顺利和好地使用AJAX

Answer 6

这不太理想，但是如果没有服务器端处理（你真的应该这样做 - 无论是PHP还是Rails或Perl，还是主机支持的任何东西），你都可以在images文件夹中允许目录列表。这具有安全隐患。

然后加载例如，http://mysite.com/rotatingImages应该响应文件列表。您可以使用AJAX执行此操作，解析相关的href，将它们推送到数组并使用JS渲染旋转图像。

Answer 7

您必须将名称列表与JavaScript一起发送，然后迭代它。

Answer 8

如上所述，您无法从客户端的浏览器（运行JavaScript的位置）访问服务器系统。

您有3种可能的解决方案：

通过一些动态后端创建JavaScript文件（php或perl脚本最适合）。主JavaScript函数仍然可以是静态的，但它所使用的数组的初始化（作为主HTML页面上的片段或单独的.js导入文件）将是php / perl生成的URL。 StackOverflow最近讨论的主题是link text
从您的JavaScript到一个单独的服务（基本上是一个由 - 再次 - php / perl后端脚本支持的URL）进行XMLHttpRequest（AJAX）调用，返回XML / JSON / your_data_format_of_choice文件列表。如果您希望/希望/需要刷新频繁更改的图像列表，这可能是更好的解决方案，而解决方案＃1中的预构建文件列表更适合您不关心更改文件列表时网页已加载到浏览器中。
一种非正统的解决方案 - 如果您关心的浏览器支持动画背景图像（gif / png），只需将您的图像集（尤其是小尺寸图像）编译成动画gif / png并使用它作为背景。

Javascript读取文件夹中的文件

8 个答案: