Jssor初始化:
function imageAndVideoJssor()
{
jssor_slider_image_and_video = '';
var slides = $('#jssor_all_play_show_slides>div');
var slideCount = slides.length;
var thumbNailNavigatorChanceToShow = slideCount < 2 ? 0 : 2;
var _CaptionTransitions = [];
_CaptionTransitions["MCLIP|B"] = {$Duration: 600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo};
var displayPieces = 4;
var arrowNavigatorSteps = 3;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
displayPieces = 2;
arrowNavigatorSteps = 1;
}
var options = {
$AutoPlay: false,
$FillMode: 2,
$Loop: 0,
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: thumbNailNavigatorChanceToShow,
$DisplayPieces: displayPieces,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: arrowNavigatorSteps //[Optional] Steps to go for each navigation request, default value is 1
}
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 0
},
$CaptionSliderOptions: {//[Optional] Options which specifies how to animate caption
$Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
$CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
$PlayInMode: 0, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
$PlayOutMode: 0 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
}
};
var jssorTagId = 'jssor_all_play_show';
jssor_slider_image_and_video = new $JssorSlider$(jssorTagId, options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider_image_and_video.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider_image_and_video.$ScaleWidth(Math.min(parentWidth, 720));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
jssorResolutionAdjustor(jssorTagId);
$(window).resize(function() {
jssorResolutionAdjustor(jssorTagId);
});
//if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
// $(window).bind("orientationchange", ScaleSlider);
//}
//responsive code end
setTimeout(function() {
showAllImageVideoJssorJwPlayer();
}
, 0);
jssor_slider_image_and_video.$On($JssorSlider$.$EVT_PARK, function(slideIndex, fromIndex) {
console.log('from index = ' + fromIndex + 'slide index = ' + slideIndex);
showAllImageVideoJssorJwPlayer();
});
}
上面的代码是在最后用于初始化jssor并且在功能我调用的函数showAllImageVideoJssorJwPlayer()
其声明下面给出。我在初始化jssor和jssor的事件公园之后调用了这个函数。
视频和图像控制代码:
function showAllImageVideoJssorJwPlayer()
{
var slideCount = jssor_slider_image_and_video.$SlidesCount();
console.log('slideCount = ' + slideCount);
if (slideCount === 1)
{
var activeVideo = $('[id="jssor_all_play_show_slides"]:eq(1)>div:last-child img');
} else {
var activeVideo = $('.pav img:visible');
}
console.log('Video ' + activeVideo.data('video'));
if (activeVideo.data('video') !== undefined)
{
console.log('inside video');
jssor_slider_image_and_video.$Pause();
var videoObj = {};
videoObj.videoSrc = activeVideo.data('video');
videoObj.thumbSrc = activeVideo.attr('src');
jssorAllImageVideoPlayerInstance = jwplayer("jssor_all_video_screen").setup({
file: videoObj.videoSrc,
image: videoObj.thumbSrc,
width: 720,
height: 400
});
jssorAllImageVideoPlayerInstance.onReady(function() {
jssorAllImageVideoPlayerInstance.play();
jssorAllImageVideoPlayerInstance.onPlay(function() {
$('body').on('click', function() {
jssorAllImageVideoPlayerInstance.pause(true);
jssor_slider_image_and_video.$Pause();
});
jssor_slider_image_and_video.$Pause();
});
jssorAllImageVideoPlayerInstance.onComplete(function() {
jssor_slider_image_and_video.$Next();
jssorAllImageVideoPlayerInstance.remove();
});
});
} else if (activeVideo.data('video') === undefined)
{
if (typeof jssorAllImageVideoPlayerInstance !== "undefined")
{
jssorAllImageVideoPlayerInstance.remove();
}
jssor_slider_image_and_video.$Play();
}
}
我想暂停幻灯片播放一次视频被播放了,我用jssor_slider_image_and_video.$Pause();
。代码达到了console.log('inside video');
,所以这表明在下一行幻灯片应停止。但实际上它没有停止幻灯片来证明,
这里连接萤火虫拍摄画面
在控制台登录内部视频的的第一次出现红色边框上的时间本身jssor $pause
应该工作,但它不起作用不知道为什么。
前解决它但它不会停止滑块,如果你看到红色边框矩形后的日志,我控制台将滑块移动记录为'from index = 4 slide index = 5'。它继续周期性地调用方法$暂停jssor对象 – gvgvgvijayan 2014-09-01 09:39:29
它周期性地继续调用jssor对象的$暂停,并且该控制台日志被写入$ EVT_PARK函数内,因此每个幻灯片都将记录的from和slide索引移动到了幻灯片的结果是在自动播放中,因为我没有使用键盘或鼠标手动触发任何滑块事件。在默认持续时间完成后,滑块移动到下一个div。 – gvgvgvijayan 2014-09-01 09:46:52
我看不清图像。我一次又一次地检查,它工作正常。请仔细检查您的代码。 – jssor 2014-09-01 09:50:35