<!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;
|
}
|
.iframe-container {
|
position: relative;
|
width: 100%;
|
height: 100vh;
|
}
|
.iframe {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
border: none;
|
transition: opacity 0.5s;
|
opacity: 0;
|
}
|
.iframe.active {
|
opacity: 1;
|
z-index: 1;
|
}
|
</style>
|
</head>
|
<body>
|
|
<div id="iframeContainer" class="iframe-container"></div>
|
|
<script src="js/layui/layui.js"></script>
|
<script>
|
layui.use(['jquery'], function () {
|
const $ = layui.jquery;
|
|
// 从 URL 获取参数
|
const urlParams = new URLSearchParams(window.location.search);
|
const menuId = urlParams.get('menuId');
|
const lbsj = urlParams.get('lbsj')*1000;
|
|
if (!menuId) {
|
alert("缺少 menuId 参数，请通过菜单点击进入此页面。");
|
return;
|
}
|
|
let views = []; // 存储视图链接
|
let currentIndex = 0; // 当前索引
|
let autoPlayInterval; // 自动播放定时器
|
const container = $('#iframeContainer');
|
|
// 请求后端接口获取视图链接列表
|
$.ajax({
|
url: 'http://localhost:9091/simple/listByMenuId/' + menuId,
|
method: 'GET',
|
success: function(res) {
|
if (res.code === 0 && res.data && res.data.length > 0) {
|
views = res.data.filter(item => item.pid == menuId).map(item => item.href);
|
|
if (views.length > 0) {
|
// 预加载所有iframe
|
views.forEach((url, index) => {
|
const iframe = $(`<iframe class="iframe" data-index="${index}" src="${url}"></iframe>`);
|
container.append(iframe);
|
|
// 第一个iframe立即显示
|
if (index === 0) {
|
iframe.addClass('active');
|
}
|
});
|
|
startAutoPlay(lbsj);
|
} else {
|
alert("未找到对应的视图链接！");
|
}
|
} else {
|
alert("请求失败或数据为空！");
|
}
|
},
|
error: function(xhr, status, error) {
|
alert("请求失败：" + error);
|
}
|
});
|
|
// 切换到下一个视图
|
function nextView() {
|
// 隐藏当前iframe
|
$(`.iframe[data-index="${currentIndex}"]`).removeClass('active');
|
|
// 更新索引
|
currentIndex = (currentIndex + 1) % views.length;
|
|
// 显示下一个iframe
|
$(`.iframe[data-index="${currentIndex}"]`).addClass('active');
|
}
|
|
// 开始自动播放
|
function startAutoPlay(lbsj) {
|
autoPlayInterval = setInterval(nextView, lbsj);
|
}
|
});
|
</script>
|
|
</body>
|
</html>
|
