<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
position: relative;
100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}
.swiper-slide iframe {
display: block;
100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<!--<div onclick="toggle()"
style="position: absolute;top: 10px;left: 10px;z-index: 100;color: white">
X
</div> -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<iframe src="http://localhost:8080/" frameborder="0"></iframe>
</div>
<div class="swiper-slide">
<iframe src="http://localhost:8081/bigscreen/index.html#/" frameborder="0"></iframe>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
autoplay: {
loop: true,
delay: 2500,
disableOnInteraction: true,
},
});
</script>
<script>
var isFull = false;
function toggle(){
!isFull?toFullScreen():exitFullscreen();
}
function toFullScreen() {
isFull=true
let elem = document.body
elem.webkitRequestFullScreen
? elem.webkitRequestFullScreen()
: elem.mozRequestFullScreen
? elem.mozRequestFullScreen()
: elem.msRequestFullscreen
? elem.msRequestFullscreen()
: elem.requestFullScreen
? elem.requestFullScreen()
: alert('浏览器不支持全屏')
}
function exitFullscreen() {
isFull=false
let elem = parent.document
elem.webkitCancelFullScreen
? elem.webkitCancelFullScreen()
: elem.mozCancelFullScreen
? elem.mozCancelFullScreen()
: elem.cancelFullScreen
? elem.cancelFullScreen()
: elem.msExitFullscreen
? elem.msExitFullscreen()
: elem.exitFullscreen
? elem.exitFullscreen()
: alert('切换失败,可尝试Esc退出')
}
</script>
</body>
</html>