1. HTML 节点 并给src 赋值页面所在的相对路径
// 可以直接给src赋值,也可以通过js进行赋值
<iframe id="iframeConatiner" src=""></iframe>
<iframe id="iframeConatiner" src="页面所在的相对路径"></iframe>
<script>
$(function () {
$("#iframeConatiner").attr("src", 页面相对路径)
});
</script>
子页面调用父页面方法
1. 父页面方法
var loop=1;
// 获取到html节点的iframe个数
loop = $("iframe").length;
// 每个页面加载完毕才调用获取时间方法
function reduce() {
loop--;
if (loop == 0) {
getTime();
}
}
2. 子页面使用
// 初始化调用只调用一次
interBool =true;
$(function () {
if (interBool) {
// 父页面的方法
parent.reduce();
interBool = false
}
}
3. 页面循环轮播自动切换
function getTime() {
$.ajax({
url:'地址',
type: 'get',
dataType: 'json',
success: function (result) {
var time = parseInt(result.data.times * 1000)
// 1. 让所有iframe隐藏
// 2. 给第一个iframe添加一个类并显示
$("iframe").hide();
$("iframe:eq(0)").addClass("current").show();
if (time != 0) {
// clearInterval()
setTimeout(start(time), time);
}
}
});
}
function start(time) {
setInterval(function () {
// 获取到当前类的节点并removeClass隐藏并获取他的下标
var index =
$(".current").removeClass("current").hide().index();
var next = $("iframe:eq(" + (index + 1) + ")");
if (next.length == 0) {
next = $("iframe:eq(0)");
}
next.addClass("current").show();
}, time)
}