Question

我在一个页面上有多个内容预告片，每个预告片都有多个可循环播放的图像。我希望能够使用jquery循环，以便它选择一个随机预告片并循环到下一个图像，然后选择另一个随机预告片并重复相同。结果应该是一页图像，其中一个图像在页面的某个位置移动。

HTML -

<div class="video-slidehow">
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
</div>

<div class="video-slidehow">
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
</div>

<div class="video-slidehow">
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
</div>

因此，它选择一个随机的“视频幻灯片”包装器，然后将该包装器的“video-thumb”子项循环到下一个。然后它选择一个不同的“视频幻灯片”包装器并将“video-thumb”子项循环到下一个。

请注意，我已经清理了这个html以使其更容易，每个视频幻灯片div都有其他父级div等。

我一直试图通过将一个类移动到不同的div并将其作为jquery元素来实现这一点，但这显然不是解决方案！

Jquery -

var elements = $('.video-slidehow');
$(elements[Math.floor(Math.random()*elements.length)]).addClass('someClass');


 $('.someClass').cycle({
    fx: 'scrollRight',      
    easing: 'easeInOutBack',
    speed:  700, 
    timeout: 7000, 
    after: doAfter
});


function doAfter() {
    $('.someClass').removeClass('someClass');   
       var elements = $('.video-slidehow'); 
           $(elements[Math.floor(Math.random()*elements.length)]).addClass('someClass');

        }

关于'随机'要求。理想情况下，它不能连续两次执行相同的包装器div。

在幼犬的回答后，我尝试了以下无效，但我觉得这开始走下正确的路线了！ -

var elements = $('.video-slidehow');

$('.video-slidehow').cycle({
    fx: 'scrollRight',      
    easing: 'easeInOutBack',
    speed:  700, 
    timeout: 7000, 
    after: doAfter
});

function doAfter() {

    $('.video-slidehow').cycle('pause');    
   $(elements[Math.floor(Math.random()*elements.length)]).cycle('resume');

}

Answer 1

您应该在加载时对所有元素使用Cycle的暂停选项。

$（＆＃39;。视频拇指＆＃39）的周期。（＆＃39;暂停＆＃39）;

当你想要一个项目恢复时，恢复功能就在那里。

function doAfter() {


       $(elements[Math.floor(Math.random()*elements.length)]).cycle('resume');

    }

Answer 2

感谢Puppybeard让我朝着正确的方向前进。

我使用的解决方案如下：

首先 - 创建一个在所有实例之间循环的数组。

var elements = $('.video-slideshow');

其次 - 为您想要一次循环一个的所有元素启动幻灯片显示：

  $('.video-slideshow').cycle({
    fx: 'scrollRight',      
    easing: 'easeInOutBack',
    speed:  700, 
    timeout: 700
});

第三，运行一个暂停所有元素幻灯片放映的功能，并恢复单个随机选择元素的幻灯片放映（使用先前设置的数组）。需要以设定的间隔重新运行此功能，以便相应地暂停和恢复幻灯片放映。我为此使用了setTimeout函数。请注意，此解决方案不会在周期之间创建一致的暂停。我相信一个比我更好的程序员可以提供更强大的解决方案，提供这种精确度。

(function (){
    $('.video-slideshow').cycle('pause');
$(elements[Math.floor(Math.random()*elements.length)]).cycle('resume');
   setTimeout(arguments.callee, 700);
})();

jquery从一个不同的随机div中循环一个孩子

2 个答案: