Question

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屏幕截图

firebug console log

在控制台日志中第一次出现内置视频的边框为红色，此时jssor $pause应该可以正常工作，但它不起作用，不知道原因。

Answer 1

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

实际上，如果滑块暂停，它将保持当前滑动，直到您单击箭头或项目符号按钮。

Answer 2

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

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

jssor：$ Pause（）不会暂停滑块

2 个答案: