使用 jQuery 的 div 幻灯片答案

【问题标题】：div slide using jQuery使用 jQuery 的 div 幻灯片
【发布时间】：2017-05-16 21:23:53
【问题描述】：

我正在使用这个 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) });

它工作得很好。我遇到的问题是，当它滑到下一个街头摄像机时，它需要一个 fue secends 来加载流。

我正在试图弄清楚如何在下一个摄像机中淡入淡出将淡出延迟 5 秒，以便下一个摄像机可以在前一个摄像机淡出之前“预加载”

有什么办法可以解决这个问题吗？

PS: 对不起英文不好

【问题讨论】：

我不是 surt，而是尝试：$els.eq(i).fadeIn(5000);而不是 $els.eq(i).fadeIn();
我试过只延迟淡入并在加载下一个相机之前给我一个空白屏幕 5 秒
也许您可以在开始淡出之前将下一个摄像机流加载到隐藏的 div 中。那么它会被缓存起来，应该很快就会出现吧？
问题在于我有 5 个全高清摄像头，同时预加载所有摄像头会消耗大量带宽和 CPU 资源
你不需要预加载所有图片，只需要下一张，继续加载下一张图片并滑动它，直到你加载完所有图片。

标签： javascript jquery html css slider

【解决方案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);

关于如何在从一个视频到下一个视频的交易中消除闪烁的任何想法？

【讨论】：