我怎样才能在同一页上添加多个jssor实例？(How can I add multiple jsso

2019-10-20 11:07发布

站内文章 / 前沿技术
102 0 0

是否可以在一个页面上添加多个jssor实例？ 是否可以动态地创建新的类实例，如： 

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

该jssor_slider1变量必须是动态的。 指1已经以变更为变量本身。 var jssor_slider1+VARIABLE 。 但我什么也没发现这一点。

也许我地认为错。

谢谢

Answer 1:

“选择”之后删除号码及改变双引号单应允许您初始化在同一页面上的多个滑块： 

var jssor_slider1 = new $JssorSlider$('slider1_container', options);
var jssor_slider2 = new $JssorSlider$('slider2_container', options);


Answer 2:

请按以下方式初始化多个实例， 

var jssor_slider1 = new $JssorSlider$("slider1_container", options1);
var jssor_slider2 = new $JssorSlider$("slider2_container", options2);


Answer 3:

对于没有jQuery的所有滑块一个设置： 

    <script>
    jssor_slider1_starter = function (containerId) {
        ...
    };
</script>

<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
    ...
    <script>
        jssor_slider1_starter('slider1_container');
    </script>
</div>

<div id="slider2_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
    ...
    <script>
        jssor_slider1_starter('slider2_container');
    </script>
</div>

对于没有jQuery的所有滑块不同的设置： 

    <script>
    jssor_slider1_starter = function (containerId) {
        ...
    };
    jssor_slider2_starter = function (containerId) {
        ...
    };
</script>

<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
    ...
    <script>
        jssor_slider1_starter('slider1_container');
    </script>
</div>

<div id="slider2_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
    ...
    <script>
        jssor_slider2_starter('slider2_container');
    </script>
</div>


Answer 4:

我使用PHP获取从MySQL数据库中的信息，它会建立几个容器，在他们的最后都包括一个滑块（从一个文件夹的图像动态构建的 - 所以，我甚至不知道有多少滑块不过。他们都将具有相同的大小/选项......因此，我找到了一个快速的，肮脏的，有效的方式与工作...

我装的所有原始JavaScript和1个文件，这就是所谓的sliders.js

它具有所有如下所示的原始内容，唯一不同的是我用我的滑块类和一个唯一的ID（由PHP / MySQL的设置） - 看到我的评论。 

jQuery(document).ready(function ($){

     //--------------------HERE I ADD AN EACH FUNCTION-------------------
     //------------------------------------------------------------------

     $(".jsslider").each(function(index){
            var SliderID = $(this).attr('id');

     // ---- Just for my own reference while troubleshooting ----
     // console.log("Index: " + index + " | Created Slider with ID: " + SliderID );     

            var jssor_1_SlideshowTransitions = [
              {$Duration:1200,x:0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
            ];

            var jssor_1_options = {
              $FillMode: 5,
              $AutoPlay: false,
              $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
              },
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $Cols: 10,
                $SpacingX: 8,
                $SpacingY: 8,
                $Align: 360
              }
            };

     //-----------------HERE IS WHERE THE MAGIC HAPPENS--------------
        var jssor_1_slider = new $JssorSlider$(SliderID, jssor_1_options);
     //--------------------------------------------------------------   

        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 800);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
    }); 
});

所以，当我打开我的PHP，其所有原始的HTML HTML - 除了ID取决于信息的ID dyanmiacally设置我从保持它独特的，在我的情况数据库中获取的ID是什么“游戏ID-2784”等等

<!-- SLIDER -->
<div class="jsslider" id="'.$g_id.'" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 608px; height: 456px; overflow: hidden; visibility: hidden; background-color: #000;">
   <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
   <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>

..........

如前所述，我知道这是做这件事的一个肮脏的方式，但如果你使用了很多滑块使用相同的选项很容易和作品真正的好，你只是只是想给他们一个“类” ---更重要的是，不知道该ID的（这样你就可以将其添加到Java的脚本。

会很高兴地听到，如果任何人有一个简单的解决方案！



文章来源: How can I add multiple jssor instances on the same page?
标签： javascript jssor
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~