页面轮播

最新推荐文章于 2024-04-12 07:49:03 发布

HH_KELE

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量218

点赞数

文章标签： js css html html5 css3

本文链接：https://blog.csdn.net/HH_KELE/article/details/120192703

版权

这是一个使用 Swiper 框架实现的网页自动轮播效果，包含两个页面，分别加载于 iframe 中。同时，提供了全屏切换功能，通过点击或者调用 `toggle()` 函数可以实现全屏和退出全屏的切换。Swiper 设置了 autoplay，loop 和 disableOnInteraction 参数，确保在用户交互时停止轮播。

摘要由CSDN通过智能技术生成

 <!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>