javascript - 通过滑动或单击显示文件夹中的图像， slider 样式(一张一张)，具有多个选择

Question

我有一个使用标准内容(html、javascript、jquery、php)编码的网站。我有一个文件夹，我会全天将图像转储到其中。我需要能够在平板电脑上访问该网站，从一个图像滑动到另一个图像，并能够选择一个或多个(按文件名)，然后将该列表传递到下一个过程。

我主要做数据库表单等，不确定图像的显示以及滑动和跟踪所选图像。任何帮助我指明正确方向的帮助将不胜感激!我真的不希望有人做我的工作......只是不知道从哪里开始(是的，我已经谷歌搜索了一段时间)。

谢谢!

Answer 1

解决您的问题有多种不同的可能性。您可以使用Bootstrap's Carousel 。它运作得相当好；假设您使用 PHP，您可以根据目录内容创建元素。

轮播的基本代码 - 直接来自 Bootstrap 的内容:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

要制作自动化 PHP 脚本，您可以使用 scandir 并使用 foreach 循环来循环内容:

<?php
$dir = './images/';
$file_list = array_diff(scandir($dir), array('..', '.'));

foreach($file_list as $item)
{
    echo '<div class="carousel-item">';
    echo '<img="' . $item . '" class="d-block w-100">';
    echo '</div>';
}
?>

这将根据该目录中的文件创建一个循环。