slick.js是常用的轮播图插件,监听video视频播放是常用的轮播模块效果。和SuperSlide.js插件、Swiper插件实现当前焦点有视频就暂停自动轮播,等视频播放结束再继续自动轮播的实现原理基本一样,就是先判断当前焦点是否有视频,如果有视频就调用暂停轮播的插件方法,使用addEventListener监听视频是否播放结束,然后再调用启用轮播的插件方法和立即播放下一屏的插件方法。
使用到的slick.js插件方法有:slickPause、slickPlay、slickNext;使用到的slick.js插件回调函数有:afterChange;使用到的js事件有:ended。
实现代码
var element = $('.your-element');
element.on('afterChange',function(){
if(element.find('.slick-current video').length > 0){
element.slick('slickPause');
var _videoID = element.find('.slick-current video').attr('id'); //HTML里要给video标签添加id属性
var _videoObj = document.getElementById(_videoID);
_videoObj.play();
_videoObj.addEventListener('ended', function(){
element.slick('slickPlay');
element.slick('slickNext');
},false);
}
});
element.slick({
autoplay:true,
autoplaySpeed:5000,
speed:1000,
dots: true,
arrows: true,
vertical: false,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnHover:false
});
if(element.find('.slick-current video').length > 0){
element.slick('slickPause');
var _videoID = element.find('.slick-current video').attr('id');
var _videoObj = document.getElementById(_videoID);
_videoObj.play();
_videoObj.addEventListener('ended', function(){
element.slick('slickPlay');
element.slick('slickNext');
},false);
}
PS:实现原理基本支持所有带有相关回调函数以及能获取当前焦点图的jQuery轮播插件。