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)

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

Answer 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

Answer 2

你可以切换;

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

Answer 3

首先展示第二个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 4

@Anil Kumar的答案很好，但还不是很好，toggle()动画更改，如果你同时这样做，而不是等待一个人完成切换另一个你＆＃39;将有2个iframe坐在那里。

除了@Anil All我想添加的是以下修改：

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号将其设置为动画，默认为1，在函数中可见。

preview(10000, 2)

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

如何使用jquery循环iframe？

4 个答案: