Question

JSSOR真是太棒了！所以开发这个神奇工具的人们应该非常非常感谢！

我的问题：我有一个滑块，默认情况下图片从左向右滑动。

以此为基础，我想创建具有不同过渡的滑块。所以我使用了那个优秀的JSSOR Transition Builder并创建了一些自定义转换。

我复制了代码，现在我有了问题：

我将该代码粘贴到哪里？

我的猜测是，它必须添加到行

之后的行中

var options = {

在下一个嵌套括号的开头之前，对我来说就是

$CaptionSliderOptions: {

这是正确的还是要将新的转换代码粘贴到其他地方？

任何帮助都非常有用！

干杯，约翰内斯

Answer 1

有两种过渡。

＆＃39;幻灯片转换＆＃39;是幻灯片级别转换，它从1张幻灯片播放到另一张幻灯片。＆＃39;字幕转换＆＃39;字幕级别转换，它在幻灯片中播放标题。

＆＃39;幻灯片转换＆＃39;被指定为数组，例如var slideshow_transitions = [{code1}，{code2}，{code3}];请参阅＆＃39;示例-jquery \ slider-with-slideshow.source.html＆＃39;例如，

<script>
    jQuery(document).ready(function ($) {
        //Reference http://www.jssor.com/development/slider-with-slideshow.html
        //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html

        var _SlideshowTransitions = [
        //Fade
        { $Duration: 1200, $Opacity: 2 }
        ];

        var options = {
            $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $DragOrientation: 3,                                //[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: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $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: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

    });
</script>

＆＃39;字幕转换＆＃39;被指定为数组，并且每个转换都使用name指定。例如var caption_transitions = []; caption_transitions [＆＃34; transition1＆＃34;] = {code1};请参阅＆＃39;示例-jquery \ slider-with-caption.source.html＆＃39;例如，

<script>
    //Reference http://www.jssor.com/development/slider-with-caption-jquery.html
    //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
    //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html

    jQuery(document).ready(function ($) {
        var _CaptionTransitions = [];
        _CaptionTransitions["L"] = { $Duration: 800, $FlyDirection: 1, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["R"] = { $Duration: 800, $FlyDirection: 2, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["T"] = { $Duration: 800, $FlyDirection: 4, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["B"] = { $Duration: 800, $FlyDirection: 8, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["TL"] = { $Duration: 800, $FlyDirection: 5, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["TR"] = { $Duration: 800, $FlyDirection: 6, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["BL"] = { $Duration: 800, $FlyDirection: 9, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["BR"] = { $Duration: 800, $FlyDirection: 10, $Easing: $Jease$.$InCubic };

        _CaptionTransitions["WAVE|L"] = { $Duration: 1500, $FlyDirection: 5, $Easing: { $Left: $Jease$.$Linear, $Top: $Jease$.$OutWave }, $ScaleVertical: 0.4, $Round: { $Top: 2.5} };
        _CaptionTransitions["MCLIP|B"] = { $Duration: 600, $Clip: 8, $Move: true, $Easing: $Jease$.$OutExpo };

        var options = {
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 3,                                //[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)
            $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: 1,                                 //[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: 3                                 //[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 jssor_slider1 = new $JssorSlider$("slider1_container", options);
    });
</script>

jssor转换构建器 - 如何将代码添加到现有滑块？

1 个答案: