页面轮播
作者:互联网
<!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; width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; } .swiper-slide iframe { display: block; width: 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>
标签:function,轮播,isFull,100%,elem,exitFullscreen,swiper,页面 来源: https://www.cnblogs.com/xiaojf/p/15239544.html