本文参考整合了以下三篇文章,不胜感谢
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>
这样就折中实现了功能,但是这样并没有实现自动扫描文件下中的文件,因为没有后台,事实上,如果有后台的话,就可以实现扫描了。