JS：滚动播放文件夹中图片

最新推荐文章于 2023-02-18 23:17:02 发布

别把BUG不当代码

最新推荐文章于 2023-02-18 23:17:02 发布

阅读量2.4k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41623154/article/details/89240980

版权

JS 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文参考整合了以下三篇文章，不胜感谢

https://blog.csdn.net/qq_42192693/article/details/82318953#comments

https://blog.csdn.net/weixin_40851250/article/details/83378025

https://codepen.io/rainyjune/pen/eBMjGL

功能需求：自动实现扫描某个指定文件夹下的图片，并滚动播放这些图片。

遇到问题：寻找网上解决办法，https://blog.csdn.net/qq_42192693/article/details/82318953#comments中的方法只适合IE浏览器，失败！！！

最终采取：根据网上找的两个方法结合折中，实现该功能

1.https://blog.csdn.net/weixin_40851250/article/details/83378025JavaScript实现的图片依次循环播放（通过数组）

2.https://codepen.io/rainyjune/pen/eBMjGL读取文件夹中的所有文件名字

具体实现方法：

1.先将本地文件夹里文件名都读取出来，然后放到list中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    pre {
  border: 1px solid blue;
}
  </style>
  <script>
      document.addEventListener('DOMContentLoaded', function() {
  var fileControl = document.querySelector('#file_input');
  var filesDiv = document.querySelector('#files');
  
  fileControl.addEventListener('change', function(event) {
    var files = event.target.files;
    var fileList = [];
    var list = "";
    for (var i = 0, len = files.length; i < len; i++) {
      fileList.push(files[i].name);
    }
    for(var i = 0, len = fileList.length; i < len;i++){
      list = list + ',"'+fileList[i]+'"';
    }
    console.log(list);

    filesDiv.innerHTML = fileList.join('\n');
    //debugger;
  });
});
  </script>
  <body>
  <input type="file" id="file_input" webkitdirectory directory />
<p>Files:</p>
<pre id="files">

</pre>
  </body>

2.将上述的list复制粘贴到banner数组中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>法官风采</title>
    <link rel="stylesheet" href="../css/public.css">
    <style>
      .content{
          font-size: 16px;
          line-height: 2.0;
      }
      img{
          display: block;
          margin: 20px auto;
          max-width: 430px;
      }
    </style>
    <script>
      var banners = ["1.jpg","2.jpg"]; // 图片地址
      var counter = 0;
      function run(){
        setInterval(cycle,2000);  //重复运行cycle函数，周期1000ms
      }
      function cycle(){
        counter++;
        if(counter == banners.length) 
          counter = 0;
        document.getElementById("banner").src = "images/" + banners[counter];
      }
    </script>
</head>
<body onload = "run();">
<div class="bigNav">
  <div class="firstNav" id="nav">                  
   <ul>
     <li id="head_nav"><a href='../content.html'>首页</a></li>
     <li id="head_nav"><a href='judge.html'>领导风采</a></li>
     <li class="firSelect" id="head_nav"><a href='faguan.html'>法官风采</a></li>
     <li id="head_nav"><a href='show.html'>荣誉展示</a></li>
   </ul>       
  </div>
</div>

<div class="article">
  <div class="title" style="margin-top:50px"><h2>法官风采</h2></div>
  <hr>
  <div class="content">
    <!-- <img src="../images/rongyu1.png" alt="">
    <img src="../images/rongyu2.png" alt=""> -->
    <img id="banner" alt="" src="images/1.jpg" style="width:400px;height:300px;">

  </div>
</div>      
</body>
</html>

这样就折中实现了功能，但是这样并没有实现自动扫描文件下中的文件，因为没有后台，事实上，如果有后台的话，就可以实现扫描了。

别把BUG不当代码

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS：滚动播放文件夹中图片

本文参考整合了以下三篇文章，不胜感谢https://blog.csdn.net/qq_42192693/article/details/82318953#commentshttps://blog.csdn.net/weixin_40851250/article/details/83378025https://codepen.io/rainyjune/pen/eBMjGL功能需求：自...
复制链接

扫一扫