javascript Jssor 滑块过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21193262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jssor slider transitions
提问by Tom Bowen
I'm trying to implement a transition effect on my Jssor slider, but I'm unsure where to place the options.
我正在尝试在 Jssor 滑块上实现过渡效果，但我不确定将选项放在哪里。
The website has a transition code generator which I used, but no matter where I seem to place the code the slider doesn't use the transition.
该网站有一个我使用的转换代码生成器，但无论我将代码放在哪里，滑块都不会使用转换。
This is my current attempt:
这是我目前的尝试：
<script type="text/javascript">
jQuery(document).ready(function ($) {
var options =
{
$DragOrientation: 3,
$AutoPlay: true,
$SlideDuration: 1500,
$AutoPlayInterval: 4500,
$SlideshowOptions: {
$Transitions: { $Duration: 600, $Delay: 50, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 1028, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2 }
}
}
var jssor_slider1 = new $JssorSlider$('banner_slider', options);
});
</script>
回答by Tom Bowen
I managed to find a working example and found out the correct format:
我设法找到了一个工作示例并找到了正确的格式：
<script type="text/javascript">
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{
$Duration: 600,
$Delay: 50,
$Cols: 8,
$Rows: 4,
$FlyDirection: 5,
$Formation:
$JssorSlideshowFormations$.$FormationZigZag,
$Assembly: 1028,
$ChessMode: { $Column: 3, $Row: 12 },
$Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad },
$Opacity: 2
}];
var options = {
$DragOrientation: 3,
$AutoPlay: true,
$SlideDuration: 1500,
$AutoPlayInterval: 4500,
$SlideshowOptions: { //Options which specifies enable slideshow or not
$Class: $JssorSlideshowRunner$, //Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //Transitions to play slide, see jssor slideshow transition builder
$TransitionsOrder: 1, //The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: 2, //0 After Slideshow, 2 Always
$ContentMode: false //Whether to trait content as slide, otherwise trait an image as slide
}
};
var jssor_slider1 = new $JssorSlider$("banner_slider", options);
});
</script>
