如何循环使用jQuery的iframe？

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

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

---

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

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

---

你可以切换;

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

---

@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对象（它可能会让速度变慢），因此尝试将这些变量缓存在函数之外的变量中，并将它们传递给它们，或者使用另一种切换元素的技巧。

链接地址: http://www.djcxy.com/p/26845.html

上一篇: How to loop iframes using jquery?

下一篇: Possible to generate a list of connected bluetooth devices for iOS?