使用jQuery的div幻燈片

Question

我正在使用此jQyery代碼來滑動包含街道攝像頭流的div。

  jQuery(function () {
var $els = $('div[id^=slide_]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 20000) });

它工作正常。 我遇到的問題是，當它滑到下一個路邊攝像頭時，需要花費大量時間才能加載流。

我試圖弄清楚一個罐子如何淡入，下一台攝像機將使淡出延遲5秒鍾，以便下一台攝像機可以在上一攝像機淡出之前“預加載”

有什么想法我可以解決這個問題嗎？

PS：對不起，英語不好

Answer 1

好的，所以我解決了我遇到的問題。 現在我有一個新問題，從一個視頻切換到另一個視頻時，我會閃爍

她是我的代碼，可能不是最優雅的代碼，但它的工作原理是

$("#slideshow > span:gt(0)").hide();

setInterval(function() {
  $('#slideshow > span:first')
    .delay().css({'display':'inline'})    
    .delay().css({'opacity':'1',}).animate({'opacity': 0}, 3000)
    .next()  
    .delay().css({'opacity':'0',}).animate({'opacity': 1}, 3000)
    .delay().css({'display':'inline'})        
    .end()
    .appendTo('#slideshow');
}, 10000);

setInterval(function() {
  $('span:nth-child(2)')
    .delay().css({'display':'inline','opacity':'0',})       
    .end()
}, 10000);

setInterval(function() {
  $('span:nth-last-child(2)')
    .delay().css({'display':'none','opacity':'0',})       
    .end()
}, 10000);

關於如何從一個視頻到另一個視頻進行事務處理時如何消除閃爍的任何想法？