文件的动态幻灯片（任何类型）

Question

我的文件夹中有一些文件（图片、pdf、文本）。
假设我的文件是：

• image1.jpg
• image2.jpg
• pdf1.pdf
• text1.txt

在文件夹“文件”中。
现在我想用自定义时间显示每个文件，这意味着例如

1. image1.jpg - 5 秒
   
2. image2.jpg - 10 秒
   
3. pdf1.pdf - 20 秒
   
4. text1.txt - 15 秒
   

假设我将文件路径和文件时间作为键 => array 中的值

我该怎么做？

我曾尝试在 php 和 javascript 中这样做

<script>

function display_time(param1)
{
  var time=param1*60*1000;
  var res=setTimeout(doHide,time);
  function doHide(){
      document.getElementById("file").style.display = "none";

  }

}


<?php
**// assume i have my file path and file time in $input respectively**
    $image_ext=["jpg","png"];
  $file_path=array_keys($input); 
  $file_time=array_values($input);
  $i=0;

  for($i;$i<count($input);$i++){
  $ext= pathinfo($file_path[$i],PATHINFO_EXTENSION);
  echo '<div class="section" style="max-width:800px">';
  if(in_array($ext,$GLOBALS['image_ext'])){
  echo '<img src= '.$file_path[$i].' alt = "This image cant be loaded" style="width:800px" id="file">';
  echo '<script>display_time('.$file_time[$i].');</script>';

  }
  elseif(($ext=="txt")){
  echo '<p id="file">'.file_get_contents($file_path[$i]).'</p>';
  echo '<script>display_time('.$file_time[$i].');</script>';

  }
  elseif($ext == 'pdf'){
  echo '<embed src='.$file_path[$i].' width="800px" height="2500px" id="file"/>';
  echo '<script>display_time('.$file_time[$i].');</script>';

  }
  echo '</div>';
  }

?>

Answer 1

你应该使用materialize

使用简单的代码，例如：

<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>

并初始化它：

$(document).ready(function(){
  $('.carousel').carousel();
});

希望这就是你所需要的！

Answer 2

尝试为每个文件创建一个对象 示例

let objArray = [
{
url = '/file.jpg',
time = 5
}
.....
]

然后创建一个setTimeout 并将对象时间值放在那里

settimeout(function(){
...
}, objArray[n].time*1000);