如何使用 jquery 循环 iframe？答案

【问题标题】：How to loop iframes using jquery?如何使用 jquery 循环 iframe？
【发布时间】：2015-06-03 06:49:23
【问题描述】：

我有两个 iframe。页面加载时，iframe1 会在 8 秒后加载，我需要显示 iframe2 在无限循环中替换 iframe1。

我尝试了下面的代码，将超时设置为8秒和10秒，但是iframe1在2秒内发生了变化。

function preview() {
    $('#iframe1').hide();
    $('#iframe2').show();
    setTimeout(function() {
        $('#iframe2').hide();
        $('#iframe1').show();
    }, 8000);
};
setInterval(preview, 10000)

以上内容也不能顺利加载。如何无缝显示/隐藏它们？

【问题讨论】：

标签： jquery loops iframe settimeout setinterval

【解决方案1】：

您可以使用递归函数执行此操作并传递参数

$('#iframe2').hide();
animateInfinite('#iframe', 1)

function animateInfinite(str, last) {
    $(str + last).show();
    setTimeout(function () {
        $(str + last).hide();
        animateInfinite('#iframe', ((last == 1) ? 2 : 1));  
    }, 8000)    
}

或使用 setinterval

var iframe = $('[id^=iframe]').hide();
iframe.eq(0).show();
setInterval(function () {
    iframe.toggle();
}, 1000);

DEMO

【讨论】：

你在找这个吗？
您将字符串而不是 obj 传递给 obj 命名参数；)
我更改了那个变量名

【解决方案2】：

您可以切换；

function preview() {
        $('#iframe1').toggle(500);
        $('#iframe2').toggle(500);
    };
    setInterval(preview, 10000)

【讨论】：

【解决方案3】：

@Anil Kumar 的答案很好，但还没有完全到位，toggle() 会为更改设置动画，如果您像这样同时执行此操作而不等待一个完成切换另一个，您将有 2 个 iframe在那里。

除了@Anil，我只想补充如下修改：

function preview(duration, hide) {
    var hide = hide || 1;
    var show = hide === 1 ? 2 : 1;

    $('#iframe'+hide).toggle(500, function() {
        $('#iframe'+show).toggle(500);
        setTimeout(function() {
            preview(duration, show);
        }, duration);
    });
}

这是未经测试的，但无论如何它应该为您应用切换，每次调用切换元素的 ID，首先为可见元素设置动画，然后为不可见元素设置动画。

这可以确保元素不会发生碰撞或破坏元素的流动。此外，我在您的函数中添加了 duration 的参数 - 这样您就可以像这样调用函数：

preview(10000)

如果 #iframe2 首先可见，则使用该 ID 号使其首先具有动画效果，它默认为在函数中可见的一个。

preview(10000, 2)

这也一直在重新创建手机不喜欢的 jQuery 对象（它可能会减慢 em 速度非常糟糕）所以尝试将它们缓存在函数外部的变量中并可能使用另一个技巧将它们传递进去切换元素。

【讨论】：

【解决方案4】：

首先只显示第二个iframe

function preview() {
    $('#iframe1').hide();
    $('#iframe2').show();
};
setInterval(preview,10000);

现在检查第二个 iframe 是否为visible

if($('#iframe2').is(':visible')){
 setTimeout(function() {
        $('#iframe2').hide();
        $('#iframe1').show();
    }, 8000);
}

编辑：您必须将代码放入document.ready

$(function(){
if($('#iframe2').is(':visible')){
 setTimeout(function() {
        $('#iframe2').hide();
        $('#iframe1').show();
    }, 8000);
}
});

查看Fiddle Link

【讨论】：

它加载了 iframe2 但 setTimeout 函数不起作用，它不加载 iframe1
您好，检查编辑...您需要将代码放在文档中准备好..看看小提琴链接
不行，还是显示 iframe2 我要切换回 iframe2 到 iframe1