Làm thế nào để lặp iframe bằng cách sử dụng jquery?

Question

Tôi có hai iframe. Khi trang tải, iframe1 được tải sau 8 giây và tôi cần hiển thị iframe2 thay thế iframe1 trên một vòng lặp vô hạn định.

Tôi đã thử mã sau và đặt thời gian chờ là 8 giây và 10 giây, nhưng iframe1 thay đổi trong vòng 2 giây.

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

Ở trên cũng không tải trơn tru. Làm thế nào tôi có thể hiển thị/ẩn chúng liền mạch?

Answer 1

Bạn có thể thực hiện thao tác này sử dụng chức năng đệ quy và vượt qua các đối số

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

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

Hoặc sử dụng setInterval

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

DEMO

Answer 2

Bạn có thể chuyển đổi;

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

Answer 3

Đầu tiên chỉ hiển thị thứ hai iframe

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

Bây giờ kiểm tra xem iframe thứ hai là visible

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

EDIT: Bạn phải đặt mã bên document.ready

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

séc ra Fiddle Link

Answer 4

Câu trả lời của @Anil Kumar là tốt nhưng không hoàn toàn ở đó, toggle() làm động tác thay đổi, nếu bạn làm điều đó cùng một lúc như vậy mà không cần chờ đợi để thực hiện chuyển đổi người khác, bạn sẽ có 2 iframe ngồi ở đó.

Ngoài @Anil Tất cả tôi muốn thêm là việc sửa đổi như sau:

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); 
    }); 
} 

này chưa được kiểm chứng nhưng những gì nó nên làm anyways là áp dụng chuyển đổi cho bạn, chuyển đổi ID trong những yếu tố mỗi cuộc gọi mà đầu tiên làm động phần tử hiển thị và sau đó làm động phần tử vô hình sau đó.

Điều này đảm bảo các yếu tố không va chạm hoặc phá vỡ dòng chảy của các phần tử. Hơn nữa tôi đã thêm một cuộc tranh cãi của duration đến chức năng của bạn - bằng cách này bạn có thể gọi hàm như thế này:

preview(10000)

nếu #iframe2 có thể nhìn thấy đầu tiên bạn sử dụng số ID để làm cho nó động đầu tiên, nó mặc định một cái có thể nhìn thấy trong hàm.

preview(10000, 2)

này cũng giữ tái tạo jQuery đối tượng tất cả các thời gian mà điện thoại di động không thực sự thích (nó có thể làm chậm em xuống khá xấu) vì vậy hãy thử để cache những trong các biến bên ngoài của hàm và vượt qua chúng có lẽ, sử dụng một mẹo khác để chuyển đổi các yếu tố.