如何运行Jssor滑块过渡

编程问答 2022-06-09

问题描述

这是我的代码和我必须修改的示例。它正在运行：

<script src="js/jssor.slider-28.0.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.jssor_1_slider_init = function() {

            var jssor_1_SlideoTransitions = [
              [{b:-1,d:1,ls:0.5},{b:0,d:1000,y:5,e:{y:6}}],[{b:-1,{b:200,y:25,{b:400,y:45,{b:600,y:65,{b:800,y:85,{b:500,y:195,[{b:0,d:2000,y:30,e:{y:3}}],rY:-15,tZ:100},d:1500,o:1,tZ:-100},y:100,o:0.8,[{b:500,o:1}],y:380,[{b:300,x:80,e:{x:6}}],x:330,r:-110,sX:5,sY:5},r:-20,sX:1,sY:1,e:{o:6,r:6,sX:6,sY:6}}],d:600,x:150,o:0.5,x:1140,o:0.6,e:{sX:3,sY:3}}]
            ];

            var jssor_1_options = {
              $Autoplay: 1,$LazyLoading: 1,$CaptionSliderOptions: {
                $Class: $JssorCaptionSlideo$,$Transitions: jssor_1_SlideoTransitions
              },$ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },$BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,$SpacingX: 20,$SpacingY: 20
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1",jssor_1_options);

            /*#region responsive code begin*/

            var MAX_WIDTH = 3000;

            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth,containerWidth);

                    jssor_1_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider,30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window,"load",ScaleSlider);
            $Jssor$.$AddEvent(window,"resize","orientationchange",ScaleSlider);
            /*#endregion responsive code end*/
        };
    </script>

真实示例：https://www.jssor.com/demos/full-width-slider.slider

我遵循的使魔术发生的文档 https://www.jssor.com/development/slider-with-slideshow.html

这是我数小时以来一直在尝试的过渡： https://www.jssor.com/slideshow/x-collapse.html

转换名称：折叠楼梯 转换代码：

{$Duration:500,$Delay:12,$Cols:10,$Rows:5,$Opacity:2,$Clip:15,$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:2049,$Easing:$Jease$.$OutQuad}

我进行修改时，图片全部消失，没有滑块出现。 

    <script type="text/javascript">
        window.jssor_1_slider_init = function() {

            var jssor_1_SlideoTransitions = [{
                $Duration:500,$Easing:$Jease$.$OutQuad                   
            }];

            var jssor_1_options = {
              $Autoplay: 1,ScaleSlider);
            /*#endregion responsive code end*/
        };
    </script>

我在做什么错了？

感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjquerysliderslideshow