[英]Jssor create dynamic slider
首先感谢完美的滑块! 我的问题是:我在一个网页上设置了2张图片,通过单击每个图片,我想打开一个具有Jssor滑块的叠加视图以显示图片。 集合中的图像具有相同的大小,例如,集合1中的图像大小为400 * 300,而集合2中的图像大小为500 * 300。 我想在单击集合时动态创建一个Jssor Slider:
$("img").click(function(){
if (this.getAttribute('id') == 'overlayImage'){
return;
}
if (this.getAttribute('u') == 'image'){
return;
}
var imgname = this.getAttribute('id');
//set images
if(imgname == 'img29'){
var imgheight,imgwidth,actualwidth,actualheight;
var winheight=window.innerHeight,winwidth=window.innerWidth;
var imgarray;
imgwidth = 2572.0;
imgheight = 1830.0;
imgarray=["29c","29d","29e","29f","29g","29h","29i","29j","29k","29l","29m","29n","29o","29p","29q",
"29r","29s","29u"];
//calculate size using screen size
if(winheight>winwidth){
//on mobile
actualwidth=winwidth-140;
actualheight=imgheight*actualwidth/imgwidth;
}
var slider1 = document.getElementById('slider1_container');
var slider2 = document.getElementById('slider_content');
slider1.style.width=winwidth+'px';
slider1.style.height=actualheight+'px';
slider2.style.width=winwidth+'px';
slider2.style.height=actualheight+'px';
slider1.style.top=(winheight-actualheight)/2+'px';
//want to clean the images added last time.
slider2.innerHTML="";
for (var i = 0; i<imgarray.length; i++) {
var oname = imgarray[i];
var elem = document.createElement("img");
elem.src="img/"+oname+".jpg";
elem.setAttribute('u', 'image');
var div = document.createElement("div");
div.appendChild(elem);
slider2.appendChild(div);
}
var options = {
$AutoPlay: true,
$PauseOnHover: 1,
$ArrowKeyNavigation: true,
$SlideWidth: actualwidth,
$SlideHeight: actualheight,
$SlideSpacing: 35,
$DisplayPieces: 2,
$ParkingPosition: 70,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$AutoCenter: 2,
$Steps: 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
$('#imageSetBox').show();
$('#hrdiv').hide();
$('#header').hide();
return;
}
并在html中:
<div id="imageSetBox" class="wrapOverlay">
<div id="slider1_container" style="position: relative; top: 60px; left: 0px; width: 800px;
height: 300px; overflow: hidden;">
<!-- Slides Container -->
<div id="slider_content" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 300px;overflow: hidden;">
</div>
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<style>
/* jssor slider arrow navigator skin 13 css */
/*
.jssora13l (normal)
.jssora13r (normal)
.jssora13l:hover (normal mouseover)
.jssora13r:hover (normal mouseover)
.jssora13l.jssora13ldn (mousedown)
.jssora13r.jssora13rdn (mousedown)
*/
.jssora13l, .jssora13r {
display: block;
position: absolute;
/* size of arrow element */
width: 70px;
height: 1000px;
cursor: pointer;
background: url(arrows/a13.png) no-repeat;
overflow: hidden;
}
.jssora13l { background-position: -10px -35px; }
.jssora13r { background-position: -70px -35px; }
.jssora13l:hover { background-position: -130px -35px; }
.jssora13r:hover { background-position: -190px -35px; }
.jssora13l.jssora13ldn { background-position: -250px -35px; }
.jssora13r.jssora13rdn { background-position: -310px -35px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora13l" id="leftarrow" style="top: 0px; left: 0px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora13r" id="rightarrow" style="top: 0px; right: 0px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
</div>
</div>
结果是:首先单击一个集,滑块呈现完美。 但是,当我第二次单击它时,图像将无法缩放以适合滑块,因为图像要大得多,因此仅显示了它们的一个角。
那么我该如何解决呢? 我猜想使用多次初始化滑块
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
这是个坏主意,但我不知道该如何解决。 任何帮助表示赞赏。
当jssor滑块初始化,在内容slider1_container
将被重新格式化,所以当你创建动态的第一次都会好的。
要再次动态创建一个新的滑块, slider1_container
的内部元素不可重用。 您将清除内部元素并重新创建。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.