Как цикл iframes с помощью jquery?

У меня есть два iframes. Когда страница загружается, iframe1 загружается через 8 секунд, и мне нужно показать iframe2, заменяющий iframe1 на неопределенный цикл.

я попробовал следующий код и установил тайм-аут как 8 секунд и 10 секунд, но iframe1 изменяется в течение 2 секунд.

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

выше также не загружается плавно. Как я могу показать / скрыть их легко?

7
iframe jquery loops setinterval settimeout

4 ответов

вы можете выполнить это действие с помощью функции рекурсии и передать аргументы

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

демо

2

вы можете переключаться; 

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

ответ @ Anil Kumar хорош, но еще не совсем там,toggle() анимирует изменение, если вы делаете это одновременно, не дожидаясь, пока одно будет сделано для переключения другого, у вас будет 2 iframes, сидящих там.

в дополнение к @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);
    });
}

это непроверено, но то, что он должен делать в любом случае, это применить переключатель для вас, переключая идентификаторы элементов каждый вызов, который сначала анимирует видимый элемент а затем оживляет невидимый элемент.

это гарантирует, что элементы не сталкиваются или не нарушают поток элементов. Кроме того, я добавил аргумент duration функции - таким образом, вы можете вызвать функцию, как это:

preview(10000)

если #iframe2 отображается сначала вы используете этот ID-номер, чтобы сделать его анимированным первым, по умолчанию он отображается в функции.

preview(10000, 2)

это также продолжает воссоздавать объекты jQuery все время, которые мобильные телефоны не очень любят (это может замедлить их довольно плохо), поэтому попробуйте кэшировать их в переменных вне функции и передать их, возможно, используя другой трюк, который переключает элементы.

0

сначала просто покажите второй iframe

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

теперь проверьте, является ли второй iframe visible

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

EDIT: вы должны поместить код внутри document.ready

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

проверьте Скрипка Ссылке

0