我正在尝试使用 Jssor 滑块根据所选类别及其子类别显示不同的 HTML 内容。我成功地为一个子类别创建了内容滑块,但我不知道如何销毁当前滑块并使用通过 Ajax 加载的不同内容重新创建它。子类别中的项目数量有所不同,因此据我了解 - 更改当前幻灯片不是一种选择。
所以,我的问题是 - 如何销毁当前的 Jssor 滑块并为新的滑块让路?
扩展 @Kai150 的方法......
- 收集原始 HTML 代码来构建 JSSOR 滑块。基本上里面的所有东西
<div id='slider1_container'>
。如果需要,您可以将初始幻灯片容器 div 留空,这样您就可以从头开始动态构建幻灯片:<div id ="slider1_slides" u="slides" ...></div>
- 消除所有制表符和 EOL(行尾)字符。您通常可以使用合适的代码编辑器(例如 Notepad++)来完成此操作。 (对于 Notepad++,请转到编辑 -> 空白操作 -> 删除不必要的空白和 EOL。)
- 将这段很长的 HTML 代码存储到一个字符串中,例如
var originalHTML = '...'
。请小心使用单引号,并且所有原始 HTML 代码都使用双引号(反之亦然)。
- 删除旧对象:
$('#slider1_container').remove();
- 从原始 HTML 开始构建新的 HTML:
$('body').append(originalHTML);
- 根据需要进行修改。例如,要添加幻灯片:
$('#slider1_container div').first().append(newSlideHTML);
where newSliderHTML
是用于构建另一张幻灯片的精简 HTML 代码。
- 初始化滑块:
new $JssorSlider$('slider1_container', options);
所有这些都可以通过脚本包装到一些基本功能中。这是一些示例功能代码,使用缩略图 5 版本,您可以在其中调用refreshSlider
具有图像对象数组:
var originalHTML = '<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 456px; background: #24262e; overflow: hidden;"> <!-- Slides Container --> <div id ="slider1_slides" u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;"> </div> <!-- Arrow Navigator Skin Begin --> <style> /* jssor slider arrow navigator skin 05 css */ /* .jssora05l (normal) .jssora05r (normal) .jssora05l:hover (normal mouseover) .jssora05r:hover (normal mouseover) .jssora05ldn (mousedown) .jssora05rdn (mousedown) */ .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn { position: absolute; cursor: pointer; display: block; background: url(js/jssor/a17.png) no-repeat; overflow:hidden; } .jssora05l { background-position: -10px -40px; } .jssora05r { background-position: -70px -40px; } .jssora05l:hover { background-position: -130px -40px; } .jssora05r:hover { background-position: -190px -40px; } .jssora05ldn { background-position: -250px -40px; } .jssora05rdn { background-position: -310px -40px; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px"> </span> <!-- Arrow Navigator Skin End --> <!-- Thumbnail Navigator Skin Begin --> <div u="thumbnavigator" class="jssort05" style="position: absolute; width: 600px; height: 100px; left:0px; bottom: 0px;"> <!-- Thumbnail Item Skin Begin --> <style> /* jssor slider thumbnail navigator skin 05 css */ /* .jssort05 .p (normal) .jssort05 .p:hover (normal mouseover) .jssort05 .pav (active) .jssort05 .pav:hover (active mouseover) .jssort05 .pdn (mousedown) */ .jssort05 .f { clip: rect(8px 63px 63px 8px); } .jssort05 .i { position: absolute; background: #000; filter: alpha(opacity=30); opacity: .3; width: 72px; height: 72px; top: 0; left: 0; transition: background-color .6s; -moz-transition: background-color .6s; -webkit-transition: background-color .6s; -o-transition: background-color .6s; } .jssort05 .pav .i { background: #fff; filter: alpha(opacity=80); opacity: .8; } .jssort05 .pdn .i { background: none; } .jssort05 .p:hover .i, .jssort05 .pav:hover .i { background: #fff; filter: alpha(opacity=30); opacity: .3; } .jssort05 .p:hover .i { transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } </style> <div u="slides" style="cursor: move;"> <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;"> <div class="o" style="position:absolute;top:1px;left:1px;width:72px;height:72px;overflow:hidden;"> <ThumbnailTemplate class="b" style="width:72px;height:72px; border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate> <div class="i"></div> <ThumbnailTemplate class="f" style="width:72px;height:72px;border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate> </div> </div> </div> <!-- Thumbnail Item Skin End --> </div> <!-- Thumbnail Navigator Skin End --> </div>';
function createSlideDeck(images) {
$.each(images, function(i,e) {
createSlide(e);
});
}
function createSlide(img) {
$div = $('<div><div>');
$div.append($('<img u="image" src="'+img.src+'" />'))
.append($('<img u="thumb" src="'+img.src+'" />'));
$('#slider1_slides').append($div);
}
function refreshSlider(images) {
$('#slider1_container').remove();
$('body').append(originalHTML);
createSlideDeck(images);
jssor_slider1 = new $JssorSlider$('slider1_container', options);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)