O_基于OwlCarousel的全屏幻灯片相册
起源
手边有块4K外接触摸屏，平时用不到的时候就在旁边亮着显示桌面，不过主屏幕的桌面是横向的，外接屏喜欢竖向方，所以Win10的基本桌面背景就不好满足需求了。
之间试过ACDSee的幻灯片，也试过PPT，从相册库的大小和增删过程来说还是感觉很繁琐，所以就做了这么个简单的html，归根到底，还是懒...
Owl Carousel 2
这个插件库也是百度到的，用起来确实很贴合自己的需求，也是很幸运的有木有。本项目中用到的版本是 2.3.4，在官网下载的包里带了 3.3.1 的jQuery 以及 3.1.11 的 jquery.mousewheel 插件，用于滚轮翻页；其他插件可以在官网找下。
目前项目实现的功能：
- 以最大边为基准的自适应图片最大化，超出部分裁剪。测试使用的屏环境是1080*1920。
- 图片自动轮询播放，轮转时间为30S，目前写死在代码里，可以根据自己需要加设置菜单。
- 鼠标悬停在页面上时暂停轮询，如果单屏幕应用可以在配置中把
autoplayHoverPause设为false。 - 左键点击任意处切换播放/停止状态，停止时左上角显示三角指示。
- 鼠标中键滚轮切换上下张，触摸屏滑动开启，但图片质量大的情况下触摸滑动时会卡卡的。
- 图片基于当前时间戳随机顺序播放，每次刷新均为不同顺序；若不需要随机就把随机处理去掉；若随机顺序每次固定可以写死随机数种子。
- 自动检测图片资源是否存在，图片加载失败自动在相册中去除元素。
- 目前文件路径及文件名为固定，图片资源复制在本目录下以供调用。一开始想用input索引到指定目录，不过找了找除了用ActiveX没其他办法了（静态页面），所以就懒得弄了。
- 文件名为
Column (1).jpg，就是Windows的全选重命名默认格式，图片数量若大于561张需要改下代码里的maxFileNum，小于的话可以不改，找不到的会自动去除嘛。 - 使用Bat调用Chrome并加参数实现自动全屏播放不可退出，当然可以在任务栏右键关闭或Alt+F4。
总之目前只是实现的自己的刚需，所以没做太多通用性设计，像目录指定、图片文件名自动检索、各种参数设置，下方进度条等等，之后有需求再加吧。
index_Current - V1_11_220618更新
- 添加设置菜单，点击图片任意处暂停，显示暂停图标；点击暂停图标显示设置菜单。
- 设置数据保存为json文件，文件位置为项目根目录，或直接改json内容。
- 更改启动方式为Chrome的自定义工作环境为
D:\ChromeDebug_ATY\AlbumOwl，开启--test-type --disable-web-security模式以供本地跨域调用json。"ChromeParameters": "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="D:\ChromeDebug_ATY\AlbumOwl" --test-type --disable-web-security --start-fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html" - 全屏方式换为非 kiosk 模式的
--start-fullscreen，使用 Win+Shift+Right 实现屏幕切换。 - 两种方式去除无资源图片元素，同时在单次轮回后刷新页面，以保证无加载失败的图片显示出来，并实现无线轮询播放（也可以用 owl 的 destroy 加 initialize 实现）。
- 动态根据窗口大小相应图片尺寸，不会再出现改变高度出现底边的情况。
index_List - V1_01_220710更新
- 由原工程目录下的相册文件夹改为其他文件夹的文件列表，减少大文件副本的空间占用。
- 最大10张同时加载图片，减小过大过多图片同时加载时的内存占用或内存不足。
- 自动检测文件列表中已删除文件并刷新，避免显示空白页。
- 修改随机函数以适应文件名列表加载形式。
问题记录
HTML中 js刷新页面的几种方法
Guohao_Chen
- reload() 方法：
语法：location.reload([bForceGet])
参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)
该方法强迫浏览器刷新当前页面。 - replace() 方法：
语法： location.replace(URL)
该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面，所以页面的method=”post”的时候，会出现”网页过期”的提示。那是因为Session的安全保护机制。
可以想到： 当调用 location.reload() 方法的时候， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。
如果有这种应用： 我们需要重新加载该页面，也就是说我们期望页面能够在服务端重新被创建， 我们期望是 Not IsPostback 的。这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
返回并刷新页面：
<script language=”JavaScript”> //document.referrer 前一个页面的URL location.replace(document.referrer); </script>不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。
自动刷新页面的方法：
- 页面自动刷新：把代码
<meta http-equiv=”refresh” content=”20″>加入区域中，其中20指每隔20秒刷新一次页面。 - 页面自动跳转：把代码
<meta http-equiv=”refresh” content=”20;url=http://www.baidu.con”>加入区域中，其中20指隔20秒后跳转到http://www.baidu.con页面。 页面自动刷新js版
<script language=”JavaScript”> function myrefresh(){ window.location.reload(); } setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次 </script>
- 页面自动刷新：把代码
如果想关闭窗口时刷新或者想开窗时刷新的话，在中调用以下语句即可。
<body onload=”opener.location.reload()”> 开窗时刷新 <body onUnload=”opener.location.reload()”> 关闭时刷新 <script language=”javascript”> window.opener.document.location.reload() </script>
Chrome浏览器默认全屏启动（非--kiosk模式）
实际上，只需要修改快捷方式的参数，只不过后面不加 --kiosk，而是在后面加 --start-fullscreen 即可！
Chrome启动参数--user-data-dir 和 --profile-directory的关系
--user-data-dir 浏览器存储用户配置文件的目录。
--profile-directory 选择要与启动的第一个浏览器关联的配置文件目录。
user-data-dir 下可以有多个 profile-directory，每创建一个user就就会多一个profile-directory，其中默认的profile-directory 位于“user-data-dir\Default”， 之后每创建一个，对应的文件夹名称是：“user-data-dir\Profile 2”、“user-data-dir\Profile 3”
m_Options.AddArgument("--user-data-dir=C:/Users/Me/AppData/Local/Google/Chrome/User Data");
m_Options.AddArgument("--profile-directory=Default");
————————————————
版权声明：本文为CSDN博主「bigcarp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bigcarp/article/details/121437108
index_List.html
Bat部分
以UTF-8输出本目录下所有后缀为jpg与png的子文件到NameList.data，然后移动到AlbumOwl工程目录下。
CHCP 65001 %UTF-8 Output% dir *.jpg *.png /s /b /a:a > NameList.data if exist NameList.data (move NameList.data E:\Projects\ATY\ProjectsOfHTML\Done\AlbumOwl\NameList.data)
index.html（V2_01_220710）
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AlbumOwl - ATY</title>
<link rel="stylesheet" href="dist/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="dist/assets/owl.theme.default.min.css" />
<script src="dist/vendors/jquery.min.js"></script>
<script src="dist/owl.carousel.min.js"></script>
<script src="dist/vendors/jquery.mousewheel.min.js"></script>
<style>
body,
#owlMain,
#owlMain div,
#owlMain a,
#owlMain img {
margin: 0;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
#owlMain img {
/* width: auto; */
object-fit: cover;
height: 105%;
}
#stopImg,
#settingMenu {
position: absolute;
top: 0;
left: 0;
z-index: 999;
text-align: center;
margin: 1%;
padding: 1%;
}
#stopImg,
#settingMenu div {
cursor: pointer;
}
#menuColumn:hover,
#menuRow:hover,
#menuSave:hover {
color: #b700ff;
}
</style>
</head>
<body>
<div id="owlMain" class="owl-carousel"></div>
<div id="settingMenu" style="right:0; background-color:white;">
<p>Album path (Album/): </p>
<input id="albumPath" />
<p>Img name: (Column): </p>
<input id="imgName" />
<p>Img suffixes (.jpg): </p>
<input id="imgSuffixes" />
<p>Cycle time seconds (30): </p>
<input id="cycleTime" />
<p>Max file number (561): </p>
<input id="maxFileNum" />
<p>Current mode:</p>
<div id="menuColumn" style="display:inline; margin-right: 16px; padding: 0.5%; border: 1px solid black;">Column
</div>
<div id="menuRow" style="display:inline; padding: 0.5%; border: 1px solid black;">
Row </div>
<div id="menuSave" style="margin-top: 2.5%; padding: 0.5%; border: 1px solid black;">Save</div>
<p></p>
</div>
<img id="stopImg" src="dist/assets/owl.video.play.png" />
</div>
<!-- <input type="file" webkitdirectory multiple> -->
<script type="text/javascript">
// "ChromeParameters": "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="D:\ChromeDebug_ATY\AlbumOwl" --test-type --disable-web-security --start-fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
// var loadingGif = "dist/assets/ajax-loader.gif"
var owlMainElement = document.getElementById("owlMain");
var owl = $("#owlMain");
var imgOrderList = [];
var imgErrorList = [];
var currentImgNum = 0;
var playStopFlag = "Play"; // "Play" or "Stop"
var maxDisplayNum = 12;
var saveJsonGroup = {
"dirPath": "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/",
"albumPath": "Album/",
"imgName": "Column",
"imgSuffixes": ".jpg",
"cycleTime": 20,
"maxFileNum": 1000,
"currentMode": "Column"
};
$.ajax({
url: "setting.json",
// async: false,
success: function (result) {
saveJsonGroup.albumPath = result.albumPath;
saveJsonGroup.imgName = result.imgName;
saveJsonGroup.imgSuffixes = result.imgSuffixes;
saveJsonGroup.cycleTime = result.cycleTime * 1;
saveJsonGroup.maxFileNum = result.maxFileNum * 1;
saveJsonGroup.currentMode = result.currentMode;
// console.log(result);
// console.log(saveJsonGroup);
}
});
var nameListGroup = [];
var loadOverFlag = 0;
$.ajax({
url: "NameList.data",
success: function (result) {
nameListGroup = result.split("\r\n");
// random img
var ramdonSeed = new Date().getTime();
nameListGroup.sort(function () { return 0.5 - Math.random(); });
// console.log(nameListGroup);
loadOverFlag = 1;
}
});
$(document).ready(function () {
if(loadOverFlag == 0){
location.reload();
}
saveJsonGroup.imgName = saveJsonGroup.currentMode
// add img element
// for (var i = 1; i <= saveJsonGroup.maxFileNum; i++) {
for (var i = 1; i <= maxDisplayNum; i++) {
var imgElementCreat = new Image();
imgElementCreat.id = "img" + i;
// console.log(nameListGroup[i - 1]);
imgElementCreat.src = nameListGroup[i - 1];
imgElementCreat.onclick = function () {
if (playStopFlag == "Play") {
playStopFlag = "Stop";
document.getElementById("stopImg").hidden = false;
owl.trigger("stop.owl.autoplay");
}
else {
playStopFlag = "Play";
document.getElementById("stopImg").hidden = true;
owl.trigger("play.owl.autoplay", [saveJsonGroup.cycleTime * 1000]);
document.getElementById("settingMenu").hidden = true;
}
// console.log("clicked: " + playStopFlag);
};
imgElementCreat.onerror = function () {
imgErrorList.push(this.id.replace("img", "") * 1);
// console.log(imgErrorList);
this.parentNode.parentNode.removeChild(this.parentNode);
};
owlMainElement.appendChild(imgElementCreat);
}
// set height with window
owlMainElement.style.maxHeight =
document.documentElement.clientHeight + "px";
owlMainElement.style.height =
document.documentElement.clientHeight + "px";
// menu display
document.getElementById("settingMenu").hidden = true;
document.getElementById("albumPath").value = saveJsonGroup.albumPath;
document.getElementById("imgName").value = saveJsonGroup.imgName;
document.getElementById("imgSuffixes").value = saveJsonGroup.imgSuffixes;
document.getElementById("cycleTime").value = saveJsonGroup.cycleTime;
document.getElementById("maxFileNum").value = saveJsonGroup.maxFileNum;
if (saveJsonGroup.currentMode == "Column") {
document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
}
else if (saveJsonGroup.currentMode == "Row") {
document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
}
document.getElementById("stopImg").onclick = function () {
document.getElementById("settingMenu").hidden = false;
};
document.getElementById("menuColumn").onclick = function () {
saveJsonGroup.currentMode = "Column";
saveJsonGroup.imgName = "Column";
document.getElementById("imgName").value = "Column";
document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
document.getElementById("menuRow").style.backgroundColor = "#ffffff";
};
document.getElementById("menuRow").onclick = function () {
saveJsonGroup.currentMode = "Row";
saveJsonGroup.imgName = "Row";
document.getElementById("imgName").value = "Row";
document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
document.getElementById("menuColumn").style.backgroundColor = "#ffffff";
};
document.getElementById("menuSave").onclick = function () {
// not null
if (
!document.getElementById("albumPath").value
|| !document.getElementById("imgName").value
|| !document.getElementById("imgSuffixes").value
|| !document.getElementById("cycleTime").value
|| !document.getElementById("maxFileNum").value
) {
alert("Input cannot be empty!");
}
else {
saveJsonGroup.albumPath = document.getElementById("albumPath").value;
saveJsonGroup.imgName = document.getElementById("imgName").value;
saveJsonGroup.imgSuffixes = document.getElementById("imgSuffixes").value;
saveJsonGroup.cycleTime = document.getElementById("cycleTime").value;
saveJsonGroup.maxFileNum = document.getElementById("maxFileNum").value;
// console.log(saveJsonGroup);
if (typeof saveJsonGroup === 'object') {
saveJsonGroup = JSON.stringify(saveJsonGroup, undefined, 4);
}
var blob = new Blob([saveJsonGroup], { type: 'text/json' });
var a = document.createElement('a');
a.download = "setting.json";
a.href = window.URL.createObjectURL(blob);
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
a.click();
document.getElementById("settingMenu").hidden = true;
document.getElementById("stopImg").hidden = true;
owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);
}
};
// start Owl Carousel
owl.owlCarousel({
items: 1,
loop: false,
mouseDrag: false,
autoplay: true,
autoplayTimeout: saveJsonGroup.cycleTime * 1000,
autoplayHoverPause: true,
nav: false,
dots: false,
center: true,
lazyLoad: true,
});
document.getElementById("stopImg").hidden = true;
owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);
// mouse wheel action
owl.on("mousewheel", ".owl-stage", function (e) {
if (e.deltaY > 0) {
owl.trigger("prev.owl");
} else {
owl.trigger("next.owl");
}
e.preventDefault();
});
owl.on("translate.owl.carousel", function () {
// console.log("Finished one img");
// console.log(imgErrorList);
currentImgNum++;
// console.log(saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum);
console.log(maxDisplayNum - imgErrorList.length - currentImgNum);
// if ((saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum) <= 0) {
if ((maxDisplayNum - imgErrorList.length - currentImgNum) <= 2) {
location.reload();
}
});
});
$(window).resize(function () {
// alert("Changed");
// set height with window
owlMainElement.style.maxHeight =
document.documentElement.clientHeight + "px";
owlMainElement.style.height =
document.documentElement.clientHeight + "px";
});
// function isSupportFileApi() {
// if (window.File && window.FileList && window.FileReader && window.Blob) {
// return true;
// }
// return false;
</script>
</body>
</html>index_Current.html
Bat部分（废弃）
::@echo off
start ./AlbumOwl_MicrosoftEdge.lnk
::start ./AlbumOwl_GoogleChrome.lnk
::"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="C:\ChromeDebug" -kiosk -fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
::"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --kiosk --edge-kiosk-type=fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
exit 实现起来有两种方式，一是复制一个Chrome的标准快捷方式，然后右键属性里加入 --user-data-dir="C:\ChromeDebug" -kiosk -fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"，然后就在Bat里start这个快捷方式就行了；另一种就是直接找Chrome的exe，其实就是把快捷方式里的内容复制出来在Bat执行，这样可移植性和目录下的文件数量都有优势，不过有个缺点就是语句不存在执行完的状态，Bat的黑窗口需要手动关。
- --user-data-dir="C:\ChromeDebug"
第一部分是使用Debug环境的Chrome，这可以和日常用的Chrome环境分开，不需要可以不加。 - -kiosk -fullscreen "file:///E:/index.html"
- --kiosk --edge-kiosk-type=fullscreen "file:///E:/index.html"
kiosk是调用Chrome的一个演示模式，所以可以自动全屏无法退出，无法右键；后边的文件就是打开Chrome后自动打开的网页。
后记：经过长时间摸索，因为两个屏幕的定位问题，最终还是只留了Edge的快捷方式，换屏 Shift+Win+Right 还是手动来...
index.html（V1_11_220618）
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AlbumOwl - ATY</title>
<link rel="stylesheet" href="dist/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="dist/assets/owl.theme.default.min.css" />
<script src="dist/vendors/jquery.min.js"></script>
<script src="dist/owl.carousel.min.js"></script>
<script src="dist/vendors/jquery.mousewheel.min.js"></script>
<style>
body,
#owlMain,
#owlMain div,
#owlMain a,
#owlMain img {
margin: 0;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
#owlMain img {
/* width: auto; */
object-fit: cover;
height: 105%;
}
#stopImg,
#settingMenu {
position: absolute;
top: 0;
left: 0;
z-index: 999;
text-align: center;
margin: 1%;
padding: 1%;
}
#stopImg,
#settingMenu div {
cursor: pointer;
}
#menuColumn:hover,
#menuRow:hover,
#menuSave:hover {
color: #b700ff;
}
</style>
</head>
<body>
<div id="owlMain" class="owl-carousel"></div>
<div id="settingMenu" style="right:0; background-color:white;">
<p>Album path (Album/): </p>
<input id="albumPath" />
<p>Img name: (Column): </p>
<input id="imgName" />
<p>Img suffixes (.jpg): </p>
<input id="imgSuffixes" />
<p>Cycle time seconds (30): </p>
<input id="cycleTime" />
<p>Max file number (561): </p>
<input id="maxFileNum" />
<p>Current mode:</p>
<div id="menuColumn" style="display:inline; margin-right: 16px; padding: 0.5%; border: 1px solid black;">Column
</div>
<div id="menuRow" style="display:inline; padding: 0.5%; border: 1px solid black;">
Row </div>
<div id="menuSave" style="margin-top: 2.5%; padding: 0.5%; border: 1px solid black;">Save</div>
<p></p>
</div>
<img id="stopImg" src="dist/assets/owl.video.play.png" />
</div>
<!-- <input type="file" webkitdirectory multiple> -->
<script type="text/javascript">
// "ChromeParameters": "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="D:\ChromeDebug_ATY\AlbumOwl" --test-type --disable-web-security --start-fullscreen "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/index.html"
// var loadingGif = "dist/assets/ajax-loader.gif"
var owlMainElement = document.getElementById("owlMain");
var owl = $("#owlMain");
var imgOrderList = [];
var imgErrorList = [];
var currentImgNum = 0;
var playStopFlag = "Play"; // "Play" or "Stop"
var saveJsonGroup = {
"dirPath": "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/",
"albumPath": "Album/",
"imgName": "Column",
"imgSuffixes": ".jpg",
"cycleTime": 20,
"maxFileNum": 561,
"currentMode": "Column"
};
$.ajax({
url: "setting.json",
// async: false,
success: function (result) {
saveJsonGroup.albumPath = result.albumPath;
saveJsonGroup.imgName = result.imgName;
saveJsonGroup.imgSuffixes = result.imgSuffixes;
saveJsonGroup.cycleTime = result.cycleTime * 1;
saveJsonGroup.maxFileNum = result.maxFileNum * 1;
saveJsonGroup.currentMode = result.currentMode;
// console.log(result);
// console.log(saveJsonGroup);
}
});
$(document).ready(function () {
saveJsonGroup.imgName = saveJsonGroup.currentMode
// random img
for (var i = 1; i <= saveJsonGroup.maxFileNum; i++) {
imgOrderList[i] = i;
}
var ramdonSeed = new Date().getTime();
imgOrderList.sort(function () { return 0.5 - Math.random(); });
// console.log(imgOrderList);
// add img element
for (var i = 1; i <= saveJsonGroup.maxFileNum; i++) {
var imgElementCreat = new Image();
imgElementCreat.id = "img" + i;
imgElementCreat.src =
saveJsonGroup.albumPath
+ saveJsonGroup.currentMode
+ "/"
+ saveJsonGroup.imgName
+ " ("
+ imgOrderList[i - 1]
+ ")"
+ saveJsonGroup.imgSuffixes;
imgElementCreat.onclick = function () {
if (playStopFlag == "Play") {
playStopFlag = "Stop";
document.getElementById("stopImg").hidden = false;
owl.trigger("stop.owl.autoplay");
// console.log(imgErrorList);
// for (var i = 0; i < imgErrorList.length; i++) {
// console.log(imgErrorList[i]);
// owl.trigger("remove.owl.carousel", [imgErrorList[i] - 1]);
// }
// owl.trigger("refresh.owl.carousel");
}
else {
playStopFlag = "Play";
document.getElementById("stopImg").hidden = true;
owl.trigger("play.owl.autoplay", [saveJsonGroup.cycleTime * 1000]);
document.getElementById("settingMenu").hidden = true;
}
// console.log("clicked: " + playStopFlag);
};
imgElementCreat.onerror = function () {
imgErrorList.push(this.id.replace("img", "") * 1);
// console.log(imgErrorList);
this.parentNode.parentNode.removeChild(this.parentNode);
};
owlMainElement.appendChild(imgElementCreat);
}
// set height with window
owlMainElement.style.maxHeight =
document.documentElement.clientHeight + "px";
owlMainElement.style.height =
document.documentElement.clientHeight + "px";
// menu display
document.getElementById("settingMenu").hidden = true;
document.getElementById("albumPath").value = saveJsonGroup.albumPath;
document.getElementById("imgName").value = saveJsonGroup.imgName;
document.getElementById("imgSuffixes").value = saveJsonGroup.imgSuffixes;
document.getElementById("cycleTime").value = saveJsonGroup.cycleTime;
document.getElementById("maxFileNum").value = saveJsonGroup.maxFileNum;
if (saveJsonGroup.currentMode == "Column") {
document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
}
else if (saveJsonGroup.currentMode == "Row") {
document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
}
document.getElementById("stopImg").onclick = function () {
document.getElementById("settingMenu").hidden = false;
};
document.getElementById("menuColumn").onclick = function () {
saveJsonGroup.currentMode = "Column";
saveJsonGroup.imgName = "Column";
document.getElementById("imgName").value = "Column";
document.getElementById("menuColumn").style.backgroundColor = "#d1ffff";
document.getElementById("menuRow").style.backgroundColor = "#ffffff";
};
document.getElementById("menuRow").onclick = function () {
saveJsonGroup.currentMode = "Row";
saveJsonGroup.imgName = "Row";
document.getElementById("imgName").value = "Row";
document.getElementById("menuRow").style.backgroundColor = "#d1ffff";
document.getElementById("menuColumn").style.backgroundColor = "#ffffff";
};
document.getElementById("menuSave").onclick = function () {
// not null
if (
!document.getElementById("albumPath").value
|| !document.getElementById("imgName").value
|| !document.getElementById("imgSuffixes").value
|| !document.getElementById("cycleTime").value
|| !document.getElementById("maxFileNum").value
) {
alert("Input cannot be empty!");
}
else {
saveJsonGroup.albumPath = document.getElementById("albumPath").value;
saveJsonGroup.imgName = document.getElementById("imgName").value;
saveJsonGroup.imgSuffixes = document.getElementById("imgSuffixes").value;
saveJsonGroup.cycleTime = document.getElementById("cycleTime").value;
saveJsonGroup.maxFileNum = document.getElementById("maxFileNum").value;
// console.log(saveJsonGroup);
if (typeof saveJsonGroup === 'object') {
saveJsonGroup = JSON.stringify(saveJsonGroup, undefined, 4)
}
var blob = new Blob([saveJsonGroup], { type: 'text/json' });
var a = document.createElement('a');
a.download = "setting.json";
a.href = window.URL.createObjectURL(blob);
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
a.click();
document.getElementById("settingMenu").hidden = true;
document.getElementById("stopImg").hidden = true;
owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);
}
};
// start Owl Carousel
owl.owlCarousel({
items: 1,
loop: false,
mouseDrag: false,
autoplay: true,
autoplayTimeout: saveJsonGroup.cycleTime * 1000,
autoplayHoverPause: true,
nav: false,
dots: false,
center: true,
lazyLoad: true,
});
document.getElementById("stopImg").hidden = true;
owl.trigger('play.owl.autoplay', [saveJsonGroup.cycleTime * 1000]);
// mouse wheel action
owl.on("mousewheel", ".owl-stage", function (e) {
if (e.deltaY > 0) {
owl.trigger("prev.owl");
} else {
owl.trigger("next.owl");
}
e.preventDefault();
});
// owl.on("refreshed.owl.carousel", function () {
// console.log("Refreshed");
// location.reload();
// });
owl.on("translated.owl.carousel", function () {
// console.log("Finished one img");
// console.log(imgErrorList);
currentImgNum++;
console.log(saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum);
if ((saveJsonGroup.maxFileNum - imgErrorList.length - currentImgNum) <= 0) {
location.reload();
// owl.trigger("refresh.owl.carousel");
}
});
});
$(window).resize(function () {
// alert("Changed");
// set height with window
owlMainElement.style.maxHeight =
document.documentElement.clientHeight + "px";
owlMainElement.style.height =
document.documentElement.clientHeight + "px";
});
// function isSupportFileApi() {
// if (window.File && window.FileList && window.FileReader && window.Blob) {
// return true;
// }
// return false;
</script>
</body>
</html>setting.json
{ "dirPath": "file:///E:/Projects/ATY/ProjectsOfHTML/Done/AlbumOwl/", "albumPath": "Album/", "imgName": "Column", "imgSuffixes": ".jpg", "cycleTime": "30", "maxFileNum": "561", "currentMode": "Column" }
index.html（V1_01_220611）
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AlbumOwl - ATY</title>
<link rel="stylesheet" href="dist/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="dist/assets/owl.theme.default.min.css" />
<script src="dist/vendors/jquery.min.js"></script>
<script src="dist/owl.carousel.min.js"></script>
<script src="dist/vendors/jquery.mousewheel.min.js"></script>
<style>
body,
#owlMain,
#owlMain div,
#owlMain a,
#owlMain img {
margin: 0;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
#owlMain img {
/* width: auto; */
object-fit: cover;
height: 103%;
}
</style>
</head>
<body>
<div id="owlMain" class="owl-carousel"></div>
<img id="stopImg" src="dist/assets/owl.video.play.png" style="position:absolute; top:0; left:0; z-index: 999;" />
<!-- <input type="file" webkitdirectory multiple> -->
<script>
// var loadingGif = "dist/assets/ajax-loader.gif"
var albumPath = "Album/Column/";
var imgSuffixes = ".jpg";
var owlMainElement = document.getElementById("owlMain");
var owl = $("#owlMain");
// var cycleTime = 1 * 1000;
// var cycleTime = 5 * 1000;
var cycleTime = 30 * 1000;
var maxFileNum = 561;
var imgOrderList = [];
var playStopFlag = 1;
$(document).ready(function () {
// random img
for (var i = 1; i <= maxFileNum; i++) {
imgOrderList[i] = i;
}
var ramdonSeed = new Date().getTime();
imgOrderList.sort(function () { return 0.5 - Math.random(); });
// console.log(imgOrderList);
// add img element
for (var i = 1; i <= maxFileNum; i++) {
var imgElementCreat = new Image();
imgElementCreat.src =
albumPath
+ "Column ("
+ imgOrderList[i - 1]
+ ")"
+ imgSuffixes;
imgElementCreat.onclick = function () {
if (playStopFlag == 1) {
playStopFlag = 0;
document.getElementById("stopImg").hidden = false;
owl.trigger("stop.owl.autoplay");
}
else {
playStopFlag = 1;
document.getElementById("stopImg").hidden = true;
owl.trigger("play.owl.autoplay", [cycleTime]);
}
// console.log("clicked: " + playStopFlag);
};
imgElementCreat.onerror = function () {
// console.log(this.parentNode);
this.parentNode.parentNode.removeChild(this.parentNode);
}
owlMainElement.appendChild(imgElementCreat);
}
// start Owl Carousel
owl.owlCarousel({
items: 1,
loop: true,
mouseDrag: false,
autoplay: true,
autoplayTimeout: cycleTime,
autoplayHoverPause: true,
nav: false,
dots: false,
center: true,
});
document.getElementById("stopImg").hidden = true;
owl.trigger('play.owl.autoplay', [cycleTime]);
// set height with window
owlMainElement.style.maxHeight =
document.documentElement.clientHeight + "px";
owlMainElement.style.height =
document.documentElement.clientHeight + "px";
// mouse wheel action
owl.on("mousewheel", ".owl-stage", function (e) {
if (e.deltaY > 0) {
owl.trigger("prev.owl");
} else {
owl.trigger("next.owl");
}
e.preventDefault();
});
});
// function isSupportFileApi() {
// if (window.File && window.FileList && window.FileReader && window.Blob) {
// return true;
// }
// return false;
// }
</script>
</body>
</html>
评论已关闭