是否可以在一个页面上添加多个jssor实例?是否可以动态创建新的类实例,如:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
jssor_slider1
变量必须是动态的。意味着1必须自己改变为变量。 var jssor_slider1+VARIABLE
。但我没有找到任何东西。
也许我在思考错误。
由于
答案 0 :(得分:1)
删除“选项”之后的数字&将双引号更改为单引号应允许您在同一页面上初始化多个滑块:
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
var jssor_slider2 = new $JssorSlider$('slider2_container', options);
答案 1 :(得分:0)
请按以下方式初始化多个实例,
var jssor_slider1 = new $JssorSlider$("slider1_container", options1);
var jssor_slider2 = new $JssorSlider$("slider2_container", options2);
答案 2 :(得分:0)
没有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>
答案 3 :(得分:0)
我使用php从mysql数据库中获取信息,它将构建几个容器,最后都包含一个滑块(使用文件夹中的图像动态构建 - 所以,我甚至都不知道有多少滑块。但它们都有相同的尺寸/选项...因此我找到了一种快速,肮脏和有效的方法来处理......
我用1个文件加载了所有原始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进行dyanmiacally设置,这使得它保持唯一,在我的情况下ID是喜欢&#34; GameID-2784&#34;等
<!-- 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>
..........
如上所述,我知道这是一种肮脏的做法,但如果您使用大量具有相同选项的滑块,那么它非常简单并且真正有用,而且您只是只是想给他们一个班级&#39; ---更重要的是,不知道ID(所以你可以将它们添加到java脚本中。
很高兴听到有人有更简单的解决方案!