1

我在一个页面上有多个内容预告片，每个预告片都有多个可以循环播放的图像。我希望能够使用 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-slideshow”包装器并将“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。

在puppybeard的回答之后，我尝试了以下方法无济于事，但我觉得这开始走上正轨了！-

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

}
4

2 回答 2

1

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

$('.video-thumb').cycle('pause');

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

function doAfter() {


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

    }
于 2012-11-06T17:38:08.467 回答
0

感谢 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);
})();
于 2012-11-07T11:12:14.847 回答