让AI帮忙写个需求，AI写出来了，只是有bug而已（一）https://developer.aliyun.com/article/1426045
但是可以发现：嵌入的网页，只有最后一个页面可以点击
我还以为在嵌入 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>
小结
代码是正常的，就是样式体验不好
首次打开的时候有点卡
都在一个页面上，它都会去访问那三个路径
一下子请求三个路径的页面
但是请求完了，轮播就不用请求了
如果只请求一个的话，每次轮播都要请求一次
都是有利有弊的
两种方案都一样
这个方案其实相对好一点，只请求一次
另一个方案就是轮播到谁就请求谁
