<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>看板轮播</title>
|
<link rel="stylesheet" href="js/layui/css/layui.css">
|
<style>
|
body {
|
margin: 0;
|
padding: 0;
|
background: #000;
|
overflow: hidden;
|
width: 100vw;
|
height: 100vh;
|
}
|
.iframe-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.iframe {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
border: none;
|
top: 0;
|
left: 0;
|
opacity: 0;
|
visibility: hidden;
|
transition: opacity 1s ease-in-out; /* 淡入淡出效果 */
|
background: #fff;
|
}
|
.iframe.active {
|
opacity: 1;
|
visibility: visible;
|
z-index: 1;
|
}
|
</style>
|
</head>
|
<body>
|
|
<div id="iframeContainer" class="iframe-container">
|
<!-- iframe 将通过 JS 动态生成 -->
|
</div>
|
|
<script src="js/layui/layui.js"></script>
|
|
<script>
|
layui.use(['jquery', 'layer'], function () {
|
const $ = layui.jquery;
|
const layer = layui.layer;
|
|
// 1. 获取 URL 参数
|
const urlParams = new URLSearchParams(window.location.search);
|
const menuId = urlParams.get('menuId');
|
// 注意：后端现在返回每个页面的具体时长，URL上的lbsj仅作为兜底默认值
|
const defaultDuration = (urlParams.get('lbsj') || 10) * 1000;
|
|
if (!menuId) {
|
layer.alert("参数错误：缺少 menuId", {icon: 2});
|
return;
|
}
|
|
const container = $('#iframeContainer');
|
let viewList = []; // 存储 { url, duration }
|
let currentIndex = 0; // 当前播放索引
|
|
// 2. 请求后端获取播放列表
|
$.ajax({
|
url: 'http://localhost:5204/simple/listByMenuId/' + menuId,
|
method: 'GET',
|
success: function(res) {
|
console.log("后端返回的完整 res：", res);
|
console.log("树数据 res.data：", res.data);
|
if (res.code === 0 && res.data && res.data.length > 0) {
|
// 适配新DTO字段: item.url 和 item.duration
|
viewList = res.data.map(item => ({
|
url: item.url,
|
// 如果后端 duration 为空或0，使用默认值，转换为毫秒
|
duration: (item.duration && item.duration > 0) ? item.duration * 1000 : defaultDuration
|
}));
|
|
initCarousel();
|
} else {
|
layer.msg("当前菜单下没有可轮播的内容", {icon: 0});
|
}
|
},
|
error: function(xhr, status, error) {
|
layer.msg("获取轮播数据失败", {icon: 2});
|
}
|
});
|
|
// 3. 初始化 DOM 和 播放逻辑
|
function initCarousel() {
|
// 先生成所有 iframe (预加载)
|
viewList.forEach((item, index) => {
|
const iframeHtml = `<iframe class="iframe" id="frm_${index}" src="${item.url}"></iframe>`;
|
container.append(iframeHtml);
|
});
|
|
// 开始播放第一张
|
playView(0);
|
}
|
|
// 4. 播放指定索引的视图 (递归调用实现不等时长轮播)
|
function playView(index) {
|
// 移除所有 active 类
|
$('.iframe').removeClass('active');
|
|
// 激活当前 frame
|
const $currentFrame = $(`#frm_${index}`);
|
$currentFrame.addClass('active');
|
|
// 刷新当前 iframe (可选：如果看板实时性要求高，每次展示时重新加载)
|
// $currentFrame.attr('src', $currentFrame.attr('src'));
|
|
// 获取当前页面的停留时间
|
const stayTime = viewList[index].duration;
|
console.log(`正在播放第 ${index + 1} 页，停留 ${stayTime/1000} 秒`);
|
|
// 计算下一页索引
|
const nextIndex = (index + 1) % viewList.length;
|
|
// 设置定时器播放下一页
|
setTimeout(() => {
|
playView(nextIndex);
|
}, stayTime);
|
}
|
});
|
</script>
|
|
</body>
|
</html>
|
