我正试图阻止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>
如果对此进行任何更正,我将不胜感激。
答案 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