如何使用 jquery 循环 iframe？

Question

我有两个 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)

以上内容也无法顺利加载。我怎样才能 show/hide 他们无缝衔接？

Answer 1

可以切换；

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

Answer 2

第一个只显示第二个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

Answer 3

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

$('#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

Answer 4

@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 手机不喜欢的对象（它会减慢它们的速度）所以尝试将它们缓存在函数外部的变量中并传递它们也许，使用另一个切换元素的技巧。

如何使用 jquery 循环 iframe？

How to loop iframes using jquery?

jquery

loops

iframe

settimeout

setinterval