Question

我正在使用图片滑块known as flexslider。目前我手动添加图像，但我希望对其进行增强，以便可以从特定文件夹中提取图像并将其添加到其<li>元素中。我正在寻找一个jQuery函数来做到这一点。有可能吗？

HTML：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
  </ul>
</div>

Answer 1

没有。 JavaScript是一种客户端技术，无法在服务器上执行任何操作。但是，您可以使用AJAX调用服务器端脚本（例如PHP），该脚本可以返回您需要的信息。我想你需要php或asp，这里是php中的代码：

<div class="flexslider">
  <ul class="slides">
        <?php
            $folder = 'images/Galerija'; // chose folder
            $extensions = array('JPG','jpg','jpeg','gif','png'); // allowed extensions
            $slika = scandir($folder); // scan folder
            sort($slika); // sort
            foreach($slika as $key => $value) {       
                    $get_extensions = explode(".",$value);
                    $ext = $get_extensions[count($get_extensions) - 1];
                    if (in_array($ext, $extensions))
                    {
                    $title = substr($value, 0,strrpos($value,'.')); // image name
                    echo "<li><img src='".$folder."/".$value."' /></li>"; 
                    }
            }
        ?>  
  </ul>
</div>

你会得到这个：

<div class="flexslider">
  <ul class="slides">
    <li><img src="images/image.jpg" /></li>
    <li><img src="images/image2.jpg" /></li>
    <li><img src="images/image3.jpg" /></li>
  </ul>
</div>

Answer 2

我在制作滑块之前遇到此问题，而不是手动添加新图像并编辑代码。我编写了一个PHP代码，用于读取文件夹中的所有图像内容。

例如，我有这个文件夹结构：

 > mywebsite
   - index.php
   > images(folder)
     -image1.png
     -image2.png
     -image3.png

在我的index.php里面

<div class="flexslider">
  <ul class="slides">
      <?php $dir_handle='./images/'; 
foreach(array_diff(scandir($dir_handle), array( '.', '..')) as $file) { echo '<li><img src="./images/'.$file. '" /></li>'; } ?>
  </ul>
</div>

上面的PHP代码读取“images”文件夹中的所有图像内容。解析的HTMl看起来应该是这样的

<div class="flexslider">
   <ul class="slides">
     <li><img class="" src="images/image1.png"></li>
     <li><img class="" src="images/image2.png"></li>
     <li><img class="" src="images/image3.png"></li>
   </ul>
</div>

我希望这会有所帮助。

Answer 3

这是可能的，但这取决于你想从哪里获取图像列表。以下是几种情况：

<强> 1。您自己的服务器上的图像（仅使用JS）

如果您有自动目录列表（即，当您访问没有index.html文件的文件夹时，会列出该文件夹中的所有文件）。您可以对此文件夹使用AJAX GET请求，然后解析内容以获取所有图像的数组。

这并不需要任何服务器端脚本，但它会向服务器发出2个请求（初始页面加载，然后JS将运行并获取图像）。

<强> 2。您自己的服务器上的图像（借助服务器端脚本）

编写一个简单的服务器端脚本（例如PHP），它将获取文件夹中所有图像的列表，然后将其作为页面的一部分提供给客户端（例如，在包含在客户端中的JS数组中）页）。

这比 1 更快，因为只有一个请求到服务器。当用户获取页面时，它将已经包含其中所有图像的列表。

第3。服务器上没有的图像（仅使用JS）

由于跨域安全限制，这通常是不可能的。即您不能使用AJAX来请求与您的域不在同一域中的页面（除非目标服务器特别允许）。

<强> 4。不在服务器上的图像（借助服务器端脚本）

使用这种方法，您可以编写一些服务器端脚本来获取另一台服务器的图像列表。源可以是HTML页面。您将获得此页面并在服务器上解析它，然后将其作为最终页面输出的一部分提供给您的用户。

将图像提取到flexslider

3 个答案: