需求

使用原生JS和iframe，嵌入网页进行轮播，需要可以点击暂停、上一页、下一页。

AI的答案

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .slider-wrapper {
      position: relative;
      width: 100%;
      height: 100vh;
      margin: 0 auto;
      overflow: hidden;
    }

    .slider-wrapper .iframe_box {
      position: absolute;
      width: 100%;
      height: 100%;
      border: none;
      opacity: 0;
      transition: opacity .5s ease-in-out;
    }

    .slider-wrapper iframe.active {
      opacity: 1;
    }

    .slider-prev,
    .slider-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border: solid #000;
      border-width: 0 3px 3px 0;
      cursor: pointer;
    }

    .slider-prev {
      left: 20px;
      transform: rotate(135deg) translateY(-50%);
    }

    .slider-next {
      right: 20px;
      transform: rotate(-45deg) translateY(-50%);
    }

    .slider-control {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slider-control-item {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ccc;
      margin: 0 10px;
      cursor: pointer;
    }

    .slider-control-item.active {
      background-color: #000;
    }

    .slider-toggle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1;
      cursor: pointer;
    }

    .slider-toggle.active:before {
      content: "暂停";
    }

    .slider-toggle:before {
      content: "开始";
      background: green;
      font-size: 30px;
      padding: 10px;
      margin-right: 20px;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="slider-wrapper">
    <iframe class="iframe_box" src="https://www.163.com" allow-same-origin></iframe>
    <iframe class="iframe_box" src="https://cn.vuejs.org/guide/introduction.html" allow-same-origin></iframe>
    <iframe class="iframe_box" src="https://www.suning.com" allow-same-origin></iframe>
    <div class="slider-prev"></div>
    <div class="slider-next"></div>
    <div class="slider-control"></div>
    <div class="slider-toggle"></div>
  </div>
  <script>
    window.onload = function () {
      var wrapper = document.querySelector(".slider-wrapper");
      var iframes = wrapper.querySelectorAll("iframe");
      var prev = wrapper.querySelector(".slider-prev");
      var next = wrapper.querySelector(".slider-next");
      var control = wrapper.querySelector(".slider-control");
      var toggle = wrapper.querySelector(".slider-toggle");
      var current = 0;
      var timer = null;
      var isPlaying = true;

      // 初始化
      iframes[current].classList.add("active");
      renderControl();

      // 上一页
      prev.onclick = function () {
        current--;
        if (current < 0) {
          current = iframes.length - 1;
        }
        render();
      }

      // 下一页
      next.onclick = function () {
        current++;
        if (current >= iframes.length) {
          current = 0;
        }
        render();
      }

      // 控制点
      control.onclick = function (e) {
        var index = getIndex(e.target);
        if (index !== -1 && index !== current) {
          current = index;
          render();
        }
      }

      // 开始/暂停
      toggle.onclick = function () {
        isPlaying = !isPlaying;
        toggle.classList.toggle("active");
        if (isPlaying) {
          start();
        } else {
          stop();
        }
      }

      // 渲染轮播图
      function render() {
        for (var i = 0; i < iframes.length; i++) {
          iframes[i].classList.remove("active");
        }
        iframes[current].classList.add("active");
        renderControl();
      }

      // 渲染控制点
      function renderControl() {
        control.innerHTML = "";
        for (var i = 0; i < iframes.length; i++) {
          var item = document.createElement("div");
          item.className = "slider-control-item" + (i === current ? " active" : "");
          control.appendChild(item);
        }
      }

      // 获取控制点的索引
      function getIndex(target) {
        if (target.classList.contains("slider-control-item")) {
          var items = control.querySelectorAll(".slider-control-item");
          for (var i = 0; i < items.length; i++) {
            if (items[i] === target) {
              return i;
            }
          }
        }
        return -1;
      }

      // 自动轮播
      function start() {
        stop();
        timer = setInterval(function () {
          current++;
          if (current >= iframes.length) {
            current = 0;
          }
          render();
        }, 2000);
      }

      function stop() {
        clearInterval(timer);
        timer = null;
      }

      start();
    }
  </script>
</body>

</html>

但是可以发现：嵌入的网页，只有最后一个页面可以点击

我还以为在嵌入 iframe 的网页中，可能存在跨域访问的问题，导致无法点击。这是由于浏览器的同源策略所导致的。

后来使用 z-index 解决了。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .slider-wrapper {
      position: relative;
      width: 100%;
      height: 100vh;
      margin: 0 auto;
      overflow: hidden;
    }

    .slider-wrapper .iframe_box {
      position: absolute;
      width: 100%;
      height: 100%;
      border: none;
      opacity: 0;
      transition: opacity .5s ease-in-out;
	    z-index:0;
    }

    .slider-wrapper iframe.active {
      opacity: 1;
	    z-index: 10;
    }

    .slider-prev,
    .slider-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border: solid #000;
      border-width: 0 3px 3px 0;
      cursor: pointer;
      z-index:100;
    }

    .slider-prev {
      left: 20px;
      transform: rotate(135deg) translateY(-50%);
    }

    .slider-next {
      right: 20px;
      transform: rotate(-45deg) translateY(-50%);
    }

    .slider-control {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slider-control-item {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ccc;
      margin: 0 10px;
      cursor: pointer;
	    z-index:100;
    }

    .slider-control-item.active {
      background-color: #000;
	    z-index:100;
    }

    .slider-toggle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1;
      cursor: pointer;
	    z-index:100;
    }

    .slider-toggle.active:before {
      content: "暂停";
	    z-index:100;
    }

    .slider-toggle:before {
	    z-index:100;
      content: "开始";
      background: green;
      font-size: 30px;
      padding: 10px;
      margin-right: 20px;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="slider-wrapper">
    <iframe class="iframe_box" src="https://cn.vuejs.org/guide/introduction.html" allow-same-origin></iframe>
    <iframe class="iframe_box" src="https://www.suning.com" allow-same-origin></iframe>
    <iframe class="iframe_box" src="https://www.163.com" allow-same-origin></iframe>
    <div class="slider-prev"></div>
    <div class="slider-next"></div>
    <div class="slider-control"></div>
    <div class="slider-toggle"></div>
  </div>
  <script>
    window.onload = function () {
      var wrapper = document.querySelector(".slider-wrapper");
      var iframes = wrapper.querySelectorAll("iframe");
      var prev = wrapper.querySelector(".slider-prev");
      var next = wrapper.querySelector(".slider-next");
      var control = wrapper.querySelector(".slider-control");
      var toggle = wrapper.querySelector(".slider-toggle");
      var current = 0;
      var timer = null;
      var isPlaying = true;

      // 初始化
      iframes[current].classList.add("active");
      renderControl();

      // 上一页
      prev.onclick = function () {
        current--;
        if (current < 0) {
          current = iframes.length - 1;
        }
        render();
      }

      // 下一页
      next.onclick = function () {
        current++;
        if (current >= iframes.length) {
          current = 0;
        }
        render();
      }

      // 控制点
      control.onclick = function (e) {
        var index = getIndex(e.target);
        if (index !== -1 && index !== current) {
          current = index;
          render();
        }
      }

      // 开始/暂停
      toggle.onclick = function () {
        isPlaying = !isPlaying;
        toggle.classList.toggle("active");
        if (isPlaying) {
          start();
        } else {
          stop();
        }
      }

      // 渲染轮播图
      function render() {
        for (var i = 0; i < iframes.length; i++) {
          iframes[i].classList.remove("active");
        }
        iframes[current].classList.add("active");
        renderControl();
      }

      // 渲染控制点
      function renderControl() {
        control.innerHTML = "";
        for (var i = 0; i < iframes.length; i++) {
          var item = document.createElement("div");
          item.className = "slider-control-item" + (i === current ? " active" : "");
          control.appendChild(item);
        }
      }

      // 获取控制点的索引
      function getIndex(target) {
        if (target.classList.contains("slider-control-item")) {
          var items = control.querySelectorAll(".slider-control-item");
          for (var i = 0; i < items.length; i++) {
            if (items[i] === target) {
              return i;
            }
          }
        }
        return -1;
      }

      // 自动轮播
      function start() {
        stop();
        timer = setInterval(function () {
          current++;
          if (current >= iframes.length) {
            current = 0;
          }
          render();
        }, 2000);
      }

      function stop() {
        clearInterval(timer);
        timer = null;
      }

      start();
    }
  </script>
</body>

</html>