2014-09-01 133 views
0

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');,所以这表明在下一行幻灯片应停止。但实际上它没有停止幻灯片来证明,

这里连接萤火虫拍摄画面

firebug console log

在控制台登录内部视频的的第一次出现红色边框上的时间本身jssor $pause应该工作,但它不起作用不知道为什么。

回答

0

实例。$ Pause调用停止自动播放滑块。 它不会突然冻结滑块。

实际上,如果滑块暂停,它将停留在当前幻灯片上,直到您单击箭头或项目符号按钮。

+0

前解决它但它不会停止滑块,如果你看到红色边框矩形后的日志,我控制台将滑块移动记录为'from index = 4 slide index = 5'。它继续周期性地调用方法$暂停jssor对象 – gvgvgvijayan 2014-09-01 09:39:29

+0

它周期性地继续调用jssor对象的$暂停,并且该控制台日志被写入$ EVT_PARK函数内,因此每个幻灯片都将记录的from和slide索引移动到了幻灯片的结果是在自动播放中,因为我没有使用键盘或鼠标手动触发任何滑块事件。在默认持续时间完成后,滑块移动到下一个div。 – gvgvgvijayan 2014-09-01 09:46:52

+0

我看不清图像。我一次又一次地检查,它工作正常。请仔细检查您的代码。 – jssor 2014-09-01 09:50:35

0

不知道它是一个正确的解决方案,但我通过把下面的代码片段

if(typeof jssor_slider_image_and_video === 'object') 
    { 
     jssor_slider_image_and_video.$Pause(); 
     delete jssor_slider_image_and_video; 
    } 

只是实例化在上面的功能imageAndVideoJssor()

下面的代码

var jssorTagId = 'jssor_all_play_show'; 
    jssor_slider_image_and_video = new $JssorSlider$(jssorTagId, options);