需求
使用原生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>
小结
代码是正常的，就是样式体验不好
首次打开的时候有点卡
都在一个页面上，它都会去访问那三个路径
一下子请求三个路径的页面
但是请求完了，轮播就不用请求了
如果只请求一个的话，每次轮播都要请求一次
都是有利有弊的
两种方案都一样
这个方案其实相对好一点，只请求一次
另一个方案就是轮播到谁就请求谁文章来源：https://www.toymoban.com/news/detail-438047.html
文章来源地址https://www.toymoban.com/news/detail-438047.html
到了这里，关于让AI帮忙写个需求，AI写出来了，只是有bug而已的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
