无法阻止JSSOR暂停暂停

时间:2015-06-27 15:22:44

标签: javascript jquery jssor

我正试图阻止JSSOR在悬停时暂停。我已经检查了之前的Q& A,但这些都是关于让它悬停而不是停止它!

我想我已经拥有了所有正确的JSSOR设置,我甚至尝试解除Slider Container的 mouseenter mouseleave ,但似乎没有任何效果。这意味着如果鼠标位于大滑块容器上方,则会停止自动播放。我希望自动播放能够不间断地继续。

以下是相关代码:

   //Define an array of slideshow transition code
var _SlideshowTransitions = [
{ $Duration: 1200, $SlideOut: true, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2  }
];

var options = {
    $SlideDuration: 500,                               //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
    $DragOrientation: 1,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
    $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
    $AutoPlayInterval: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
    $HoverToPause: false,                               //Whether to pause when mouse over if a slideshow is auto playing
    $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
        $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
        $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
        $TransitionsOrder: 0,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
        $PlayOrientation: 1,                            //[Optional] Direction of play, 1 horizontal, 2 vertical
        $PauseOnHover: 0,                               //[Optional] Direction 0: no pause, 1: pause for desktop, 2: pause for touch device, 3: pause for
                                                        //           desktop and touch device, 4: freeze for desktop, 8: freeze for touch device, 
                                                        //           12: freeze for desktop and touch device, default value is 1
        $ShowLink: false                                 //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
    }

};
var jssor_slider1 = new $JssorSlider$('SliderContainer', options);

这是有问题的HTML元素:

        <div id="SliderContainer" class="Slider">
        <div u="slides" class="SlideContainer">
            <div><img u="image" src="img/large-blinds/01-compressed.jpg"  alt="" />
                <div class="SlideTextContainer">
                    <div class="SlideText">Some Text</div>
                </div>
            </div>
            <div><img u="image" src="img/large-blinds/06-compressed.jpg"  alt="" />
                <div class="SlideTextContainer">
                    <div class="SlideText">Some Text</div>
                </div>
            </div>
            <div><img u="image" src="img/large-blinds/02-compressed.jpg"  alt="" />
                <div class="SlideTextContainer">
                    <div class="SlideText">Some Text</div>
                </div>
            </div>
            <div><img u="image" src="img/large-blinds/03-compressed.jpg"  alt="" />
                <div class="SlideTextContainer">
                    <div class="SlideText">Some Text</div>
                </div>
            </div>
            <div><img u="image" src="img/large-blinds/07-compressed.jpg"  alt="" />
                <div class="SlideTextContainer">
                    <div class="SlideText">Some Text</div>
                </div>
            </div>
            <div><img u="image" src="img/large-blinds/04-compressed.jpg"  alt="" />
                <div class="SlideTextContainer">
                    <div class="SlideText">Some Text</div>
                </div>
            </div>
            <div><img u="image" src="img/large-blinds/05-compressed.jpg"  alt="" />
                <div class="SlideTextContainer">
                    <div class="SlideText">Some Text</div>
                </div>
            </div>
        </div>
    </div>

如果对此进行任何更正,我将不胜感激。

3 个答案:

答案 0 :(得分:0)

以下是JSSOR的API详细信息。

$PauseOnHover: 0,                               

//[Optional] Whether to pause when mouse over if a slider is auto playing,
0 no pause,
1 pause for desktop,
2 pause for touch device,
3 pause for desktop and touch device, default value is 3

按要求使用

基本上是回答

$PauseOnHover: 0, 

答案 1 :(得分:0)

我已经解决了这个问题。

问题是 $ SlideshowOptions 中已定义$ PauseOnHover (请参阅原始问题中的原始JSSOR代码)。

要实现这一点,我必须把它放在 $ SlideshowOptions 之外:

    //Define an array of slideshow transition code
var SlideshowTransitions = [
{ $Duration: 1200, $SlideOut: true, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2  }
];

var options = {
    $SlideDuration: 1500,                           //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
    $DragOrientation: 1,                            //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
    $AutoPlay: true,                                //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
    $AutoPlayInterval: 2000,                        //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
    $PauseOnHover: 0,                               //[Optional] Direction 0: no pause, 1: pause for desktop, 2: pause for touch device, 3: pause for
    $TransitionsOrder: 0,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
    $PlayOrientation: 1,                            //[Optional] Direction of play, 1 horizontal, 2 vertical
                                                    //           desktop and touch device, 4: freeze for desktop, 8: freeze for touch device, 
                                                    //           12: freeze for desktop and touch device, default value is 1
    $ShowLink: true,                                //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false       
    $SlideshowOptions: 
    {                                               //[Optional] Options to specify and enable slideshow or not
        $Class: $JssorSlideshowRunner$,             //[Required] Class to create instance of slideshow
        $Transitions: SlideshowTransitions,         //[Required] An array of slideshow transitions to play slideshow
    }

};
var jssor_slider1 = new $JssorSlider$('SliderContainer', options);

默认操作是在悬停时暂停,因此错误放置变量意味着它使用了默认操作。

幻灯片放映现在正常,悬停时不再暂停

我希望这对使用JSSOR的其他人有用,这是一个非常有用和多功能的幻灯片工具。

答案 2 :(得分:0)

你可以设置, $ PauseOnHover:3 代替$ PauseOnHover:0

$PauseOnHover: 3