如何将 jssor 过渡生成器添加到现有幻灯片中？答案

【问题标题】：how to add jssor transition builder into exisiting slider?如何将 jssor 过渡生成器添加到现有幻灯片中？
【发布时间】：2014-10-01 21:37:41
【问题描述】：

如何将 jssor 过渡添加到我的滑块中？我使用了这样的 Jssor 代码：

<script src="js/jssor.slider.mini.js"></script>
<sc...>
jQuery(document).ready(function ($) {
    var options = { $AutoPlay: true };
    var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
<sc...>

参考：http://www.jssor.com/development/

上面的代码运行良好，但现在我将使用下面的转换代码：

{$Duration:1500,x:0.2,y:-0.1,$Delay:20,$Cols:8,$Rows:4,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationZigZag,$Assembly:260,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Top:$JssorEasing$.$EaseInWave,$Clip:$JssorEasing$.$EaseOutQuad},$Outside:true,$Round:{$Left:0.8,$Top:2.5}}

参考：http://www.jssor.com/development/tool-slideshow-transition-viewer.html

我可以在以下代码中的什么位置添加此转换？

<sc...>
jQuery(document).ready(function ($) {
    var options = { $AutoPlay: true };
    var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</sc...>

【问题讨论】：

标签： slider slideshow transition jssor

【解决方案1】：

终于找到了。答案如下：

    jssor_slider1_starter = function (containerId) {
    //Define an array of slideshow transition code
    var _SlideshowTransitions = [
    {$Duration:1500,x:0.2,y:-0.1,$Delay:20,$Cols:8,$Rows:4,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationZigZag,$Assembly:260,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Top:$JssorEasing$.$EaseInWave,$Clip:$JssorEasing$.$EaseOutQuad},$Outside:true,$Round:{$Left:0.8,$Top:2.5}}
    ];
    // And you can add more transitions to the array. 
    var options = {
        $AutoPlay: true,
        $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: _SlideshowTransitions,
                $TransitionsOrder: 1,
                $ShowLink: true
            }
    };
    var jssor_slider1 = new $JssorSlider$(containerId, options);
};

参考：http://www.jssor.com/development/tool-slideshow-transition-viewer.html

【讨论】：