Question

所以我正在忙着建立一个需要动态轮播的本地网站。我目前有一个静态的，我已经。所以它需要从本地文件夹中读取所有图像，所以如果新的图像我不需要操纵html来添加它们。你能帮忙吗？如果你能给我一个这方面的来源，我们将不胜感激。

Answer 1

您无法使用JavaScript执行此操作，因为它无法访问计算机的文件系统。这是因为JavaScript在设计时考虑了安全性。

您需要使用服务器端语言，如asp或PHP。您可以使用正确的安全权限访问文件系统，并在服务器上构建Java Script数组代码。当页面加载时，图像的路径将存在于网页中，然后您可以在Java脚本中使用它们执行所需的操作。

JavaScript无法直接访问文件系统的内容。您必须首先使用服务器端脚本（用PHP等编写）传递内容。

然后，一旦有了这个，就可以在JavaScript中使用循环来单独加载它们。

可能的解决方案是使用File API，但您仍需要授予权限。

或者以此为例进行检查：

＆＃13;

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true, // Show next and prev buttons
    slideSpeed: 100,
    paginationSpeed: 400,
    singleItem: true
  });
});

＆＃13;

#owl-demo .item img {
  display: block;
  width: 100%;
  height: 300px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>


<div class="container">
  <div class="row">
    <section class="sidebar col-sm-4">
      <div id="owl-demo" class="owl-carousel owl-theme">
      
      <!-- HERE you can fetch all image from folder by using Server Side Languages for this like asp or PHP & loop through the results -->
      
        <div class="item"><img src="https://placehold.it/300x300?text=image1" alt="The Last of us"></div>
        <div class="item"><img src="https://placehold.it/300x300?text=image2" alt="GTA V"></div>
        <div class="item"><img src="https://placehold.it/300x300?text=image3" alt="Mirror Edge"></div>
        
      </div>
    </section>
  </div>
  <!--row-->

</div>
<!--container-->

＆＃13;

动态轮播滑块HTML？

1 个答案: