如何在同一页面上添加多个jssor实例?
How can I add multiple jssor instances on the same page?
是否可以在一个页面上添加多个jssor实例?是否可以动态地创建新的类实例，如:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
jssor_slider1变量必须是动态的。意味着1必须变成一个变量。var jssor_slider1+VARIABLE。
也许我想错了。
谢谢
去掉"options"后面的数字&将双引号改为单引号应该允许您在同一页面上初始化多个滑块:
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
var jssor_slider2 = new $JssorSlider$('slider2_container', options);
请按以下方式初始化多个实例
var jssor_slider1 = new $JssorSlider$("slider1_container", options1);
var jssor_slider2 = new $JssorSlider$("slider2_container", options2);
一个不使用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>
我使用php从mysql数据库获取信息，它将构建几个容器，在它们结束时都包括一个滑块(动态构建与文件夹中的图像-所以，我甚至不知道有多少滑块。但它们都有相同的尺寸/选项…因此，我找到了一种快速，肮脏和有效的方法来处理它…
我用一个文件加载了所有原始javascript，它叫做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保持它的唯一性，在我的例子中，ID是像"GameID-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-script中)，它就会很好地工作。
如果有人有更简单的解决方案，我会很高兴听到!相关文章：
- ES6构造函数返回基类的实例
- KnockoutJS-组件-多个实例
- 为什么无法在TypeScript中导出类实例
- 如何在GoogleWeb工具包(GWT）中从JSNI调用接口(实例化）
- fluxxor向一个flux实例添加一组以上的操作
- 使用jQuery获取Dropzone实例/对象
- "实例范围”;TypeScript类的getter/setter
- 如何在速度模板中获取LiferayPortlet实例id
- 同一项怎么可能在一个实例中未定义，却在另一个实例上定义
- 实例创建(JS）
- 显示模块模式在Knockout中设置模型的新实例
- 如何获取单选按钮的多个实例的选定单选按钮值
- 当同一浏览器的两个实例浏览时，Javascript页面如何具有唯一的ID
- 在哪里可以找到RXUI Javascript'时间飞逝'实例
- spine.js在启动时填充模型实例
- 不再需要时使用jQuery/kill实例
- 如何在用户输入时实例化数组
- 从Sequelize中的非实例更新
- 如何基于数组值创建新实例
- 如何在同一页面上添加多个jssor实例?
