我动态创建了一个JSSOR网格滑块。
//GridSlider.js
slider1_container_clicked = function (rowIndex, rowItem)
{
alert("You have clicked slide : " + (rowItem + 1) + " on row : " + (rowIndex + 1) );
}
function CreateGridSlider (_name, _container)
{
var jssor_grid_slider;
//var jssor_row_slider;
this.nestedSliders = [];
this.nestedSliderObjects = [];
this.currentRowItem;
this.isSlideClicked=false;
function BulletNavigatorStyle ()
{
try
{
var bulletcss = '.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av { background: url(images/b05.png) no-repeat; overflow: hidden; cursor: pointer;} .jssorb03 div { background-position: -5px -4px; } .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; } .jssorb03 .av { background-position: -65px -4px; }.jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }'
bulletstyle = document.createElement('style');
bulletstyle.type = 'text/css';
if (bulletstyle.styleSheet)
{
bulletstyle.styleSheet.cssText = bulletcss;
} else
{
bulletstyle.appendChild(document.createTextNode(bulletcss));
}
//_container.appendChild(bulletstyle);
return bulletstyle;
}
catch(e)
{
alert("Error :: SliderOptions() :: BulletNavigatorStyle() :: " + e.Message);
}
};
GridBulletNavigatorStyle = function()
{
try
{
var bulletcss = '.jssorb02 div, .jssorb02 div:hover, .jssorb02 .av { background: url(images/b02.png) no-repeat; overflow: hidden; cursor: pointer;} .jssorb02 div { background-position: -5px -5px; } .jssorb02 div:hover, .jssorb02 .av:hover { background-position: -35px -5px; } .jssorb02 .av { background-position: -65px -5px; }.jssorb02 .dn, .jssorb02 .dn:hover { background-position: -95px -5px; }'
bulletstyle = document.createElement('style');
bulletstyle.type = 'text/css';
if (bulletstyle.styleSheet)
{
bulletstyle.styleSheet.cssText = bulletcss;
} else
{
bulletstyle.appendChild(document.createTextNode(bulletcss));
}
//_container.appendChild(bulletstyle);
return bulletstyle;
}
catch(e)
{
alert("Error :: SliderOptions() :: GridBulletNavigatorStyle() :: " + e.Message);
alert("Error :: SliderOptions() :: GridBulletNavigatorStyle() :: " + e.Message);
}
};
BulletNavigator = function()
{
try
{
var divBulletNav = document.createElement("div");
divBulletNav.setAttribute("u","navigator");
divBulletNav.setAttribute("class","jssorb03");
divBulletNav.setAttribute("style","position: absolute; bottom: 10px; left: 6px;");
//_container.appendChild(divBulletNav);
var divTemplate = document.createElement("div");
divTemplate.setAttribute("u","prototype");
divTemplate.setAttribute("style","position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;");
divBulletNav.appendChild(divTemplate);
return divBulletNav;
}
catch(e)
{
alert("Error :: SliderOptions() :: BulletNavigator() :: " + e.Message);
}
};
GridBulletNavigator = function()
{
try
{
var divBulletNav = document.createElement("div");
divBulletNav.setAttribute("u","navigator");
divBulletNav.setAttribute("class","jssorb02");
divBulletNav.setAttribute("style","position: absolute; bottom: 50px; left: 6px;");
//_container.appendChild(divBulletNav);
var divTemplate = document.createElement("div");
divTemplate.setAttribute("u","prototype");
divTemplate.setAttribute("style","position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;");
var divNumberTemplate = document.createElement("div");
divNumberTemplate.setAttribute("u","numbertemplate");
divTemplate.appendChild(divNumberTemplate);
divBulletNav.appendChild(divTemplate);
return divBulletNav;
}
catch(e)
{
alert("Error :: SliderOptions() :: BulletNavigator() :: " + e.Message);
}
};
HorizontalArrowNavigatorStyle = function()
{
try
{
arrowcss = '.jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn {position: absolute;cursor: pointer;display: block;background: url(images/a03.png) no-repeat;overflow: hidden;} .jssora03l {background-position: -3px -33px;} .jssora03r { background-position: -63px -33px; } .jssora03l:hover { background-position: -123px -33px; } .jssora03r:hover { background-position: -183px -33px; } .jssora03ldn { background-position: -243px -33px; } .jssora03rdn { background-position: -303px -33px; }'
arrowstyle = document.createElement('style');
arrowstyle.type = 'text/css';
if (arrowstyle.styleSheet){
arrowstyle.styleSheet.cssText = arrowcss;
} else {
arrowstyle.appendChild(document.createTextNode(arrowcss));
}
//_container.appendChild(arrowstyle);
return arrowstyle;
}
catch(e)
{
alert("Error :: SliderOptions() :: ArrowNavigatorHorizontalStyle() :: " + e.Message);
}
};
HorizontalArrowNavigatorPrevious = function()
{
try
{
divLeftArrowNav = document.createElement("span");
divLeftArrowNav.setAttribute("u","arrowleft");
divLeftArrowNav.setAttribute("class","jssora03l");
divLeftArrowNav.setAttribute("style","width: 55px; height: 55px; top: 40%; left: 8px;");
//_container.appendChild(divLeftArrowNav);
return divLeftArrowNav;
}
catch(e)
{
alert("Error :: SliderOptions() :: LeftArrowNavigatorHorizontal() :: " + e.Message);
}
};
HorizontalArrowNavigatorNext = function()
{
try
{
divRightArrowNav = document.createElement("span");
divRightArrowNav.setAttribute("u","arrowright");
divRightArrowNav.setAttribute("class","jssora03r");
divRightArrowNav.setAttribute("style","width: 55px; height: 55px; top: 40%; right: 8px");
//_container.appendChild(divRightArrowNav);
return divRightArrowNav;
}
catch(e)
{
alert("Error :: SliderOptions() :: RightArrowNavigatorHorizontal() :: " + e.Message);
}
};
VerticalArrowNavigatorStyle = function()
{
try
{
arrowcss = '.jssora03u, .jssora03d, .jssora03udn, .jssora03ddn {position: absolute;cursor: pointer;display: block;background: url(images/a08.png) no-repeat;overflow: hidden; opacity: .4; filter:alpha(opacity=40);} .jssora03u { background-position: -5px -35px;}.jssora03d {background-position: -65px -35px;}.jssora03u:hover {background-position: -5px -35px;opacity: .8; filter:alpha(opacity=80);} .jssora03d:hover {background-position: -65px -35px;opacity: .8; filter:alpha(opacity=80);} .jssora03udn {background-position: -5px -35px;opacity: .3; filter:alpha(opacity=30); } .jssora03ddn { background-position: -65px -35px;opacity: .3; filter:alpha(opacity=30); }'
arrowstyle = document.createElement('style');
arrowstyle.type = 'text/css';
if (arrowstyle.styleSheet){
arrowstyle.styleSheet.cssText = arrowcss;
} else {
arrowstyle.appendChild(document.createTextNode(arrowcss));
}
//_container.appendChild(arrowstyle);
return arrowstyle;
}
catch(e)
{
alert("Error :: SliderOptions() :: ArrowNavigatorVerticalStyle() :: " + e.Message);
}
};
VerticalArrowNavigatorPrevious = function()
{
try
{
divLeftArrowNav = document.createElement("span");
divLeftArrowNav.setAttribute("u","arrowleft");
divLeftArrowNav.setAttribute("class","jssora03u");
divLeftArrowNav.setAttribute("style","width: 50px; height: 50px; top: 8px; left: 40%;");
//_container.appendChild(divLeftArrowNav);
return divLeftArrowNav;
}
catch(e)
{
alert("Error :: SliderOptions() :: LeftArrowNavigatorVertical() :: " + e.Message);
}
};
VerticalArrowNavigatorNext = function()
{
try
{
divRightArrowNav = document.createElement("span");
divRightArrowNav.setAttribute("u","arrowright");
divRightArrowNav.setAttribute("class","jssora03d");
divRightArrowNav.setAttribute("style","width: 50px; height: 50px; bottom: 8px; left: 40%");
//_container.appendChild(divRightArrowNav);
return divRightArrowNav;
}
catch(e)
{
alert("Error :: SliderOptions() :: RightArrowNavigatorVertical() :: " + e.Message);
}
};
try
{
var ImageContainer = [4];
for (var i = 0; i < 4; i++)
{
ImageContainer[i] = { src : "images/Default/00" + (i+1) + ".jpg" };
}
//Removes Existing Child
while (_container.hasChildNodes())
_container.removeChild(_container.firstChild);
//Grid Slider Options
var gridBulletNavOptions = {$Class: $JssorBulletNavigator$, $ChanceToShow: 2, $AutoCenter: 2, $Steps: 1, $Lanes: 1, $SpacingX: 0,$SpacingY: 0,$Orientation: 2 }
var gridArrowNavOptions = {$Class: $JssorArrowNavigator$, $ChanceToShow: 2, $AutoCenter: 1, $Steps: 1 };
var options = { $AutoPlay: false, $AutoPlaySteps: 1, $AutoPlayInterval: 2000, $FillMode:0, $DisplayPieces: 3, $SlideWidth:900, $SlideHeight:150, $ArrowKeyNavigation: false, $SlideDuration: 1000, $MinDragOffsetToSlide: 30, $SlideSpacing: 3, $ParkingPosition: 0, $PauseOnHover: 3, $PlayOrientation: 2, $DragOrientation: 2, $BulletNavigatorOptions: gridBulletNavOptions, $ArrowNavigatorOptions: gridArrowNavOptions }
//Row Slider Options
var rowBulletNavOptions = {$Class: $JssorBulletNavigator$, $ChanceToShow: 2, $AutoCenter: 3, $Steps: 1, $Lanes: 1, $SpacingX: 0,$SpacingY: 0,$Orientation: 1 }
var rowArrowNavOptions ={$Class: $JssorArrowNavigator$, $ChanceToShow: 2, $AutoCenter: 2, $Steps: 1 };
var rowOptions = { $AutoPlay: false, $AutoPlaySteps: 1, $AutoPlayInterval: 2000, $FillMode:0, $DisplayPieces: 3, $SlideWidth:300, $SlideHeight:150, $ArrowKeyNavigation: false, $SlideDuration: 1000, $MinDragOffsetToSlide: 30, $SlideSpacing: 3, $ParkingPosition: 0, $PauseOnHover: 3, $PlayOrientation: 1, $DragOrientation: 1, $BulletNavigatorOptions: rowBulletNavOptions, $ArrowNavigatorOptions: rowArrowNavOptions};
var iTop=0;
//Grid Slides creation
var divGridSlides = document.createElement("div");
divGridSlides.setAttribute("u","slides");
divGridSlides.setAttribute("style","position: absolute; overflow: hidden; left: 0px; top: 0px;width:900px; height:450px;");
//Adding grid slides to Grid slider
_container.appendChild(divGridSlides);
//Bullet for Grid slider
_container.appendChild(GridBulletNavigatorStyle());
_container.appendChild(GridBulletNavigator());
//Row Slider creation
for (var i = 0; i < 4; i++)
{
var rowName = _name + "_row_" + i;
//Container for Row Slider
var divRowContainer = document.createElement("div");
divRowContainer.setAttribute("style","position:absolute; overflow: hidden; left: 0px; top: " + iTop + "px; width:900px; height:150px; ");
//Row Slider
var divRowSliderContainer = document.createElement("div");
divRowSliderContainer.setAttribute("id", rowName);
divRowSliderContainer.setAttribute("style","position: absolute; overflow: hidden; left: 0px; top: 0px; width:900px; height: 150px;");
//Removes Existing Child
while (divRowSliderContainer.hasChildNodes())
divRowSliderContainer.removeChild(divRowSliderContainer.firstChild);
//Row slides creation
var divRowSlides = document.createElement("div");
divRowSlides.setAttribute("u","slides");
divRowSlides.setAttribute("style","position: absolute; overflow: hidden; left: 0px; top: 0px;width:900px; height:150px;");
//Image creation
for (var j = 0; j < ImageContainer.length; j++)
{
var divimg = document.createElement("div");
divimg.setAttribute("style","position: absolute; overflow: hidden; left: 0px; top: 0px; width:300px; height:150px; ");
var img = document.createElement("img");
img.setAttribute("u","image");
img.src = ImageContainer[j].src;
divimg.appendChild(img);
divRowSlides.appendChild(divimg);
}
//Adding row slides to row slider
divRowSliderContainer.appendChild(divRowSlides);
//Bullet for row slider
divRowSliderContainer.appendChild(BulletNavigatorStyle());
divRowSliderContainer.appendChild(BulletNavigator());
//Arrow for row slider
divRowSliderContainer.appendChild(HorizontalArrowNavigatorStyle());
divRowSliderContainer.appendChild(HorizontalArrowNavigatorPrevious());
divRowSliderContainer.appendChild(HorizontalArrowNavigatorNext());
//Adding row slider to row container
divRowContainer.appendChild(divRowSliderContainer);
//Adding row container to grid's slides node.
_container.firstChild.appendChild(divRowContainer);
//Row Slider Object creation
//var jssor_row_slider = new $JssorSlider$(rowName, rowOptions);
//this.nestedSliderObjects.push(jssor_row_slider);
iTop = iTop + 150;
}
//Arrow for grid slider
_container.appendChild(VerticalArrowNavigatorStyle());
_container.appendChild(VerticalArrowNavigatorPrevious());
_container.appendChild(VerticalArrowNavigatorNext());
//Row Slider Object creation
for (var i = 0; i < 4; i++)
{
var rowName = _name + "_row_" + i;
var jssor_row_slider = new $JssorSlider$(rowName, rowOptions);
function rowsliderOnClick(slideIndex)
{
try
{ //Sets the row's slide index
this.currentRowItem = slideIndex;
this.isSlideClicked=true;
}
catch(e)
{
alert("Error :: sliderOnClick() :: " + e.Message);
}
}
jssor_row_slider.$On($JssorSlider$.$EVT_CLICK, rowsliderOnClick);
this.nestedSliderObjects.push(jssor_row_slider);
}
//Grid Slider Creation
jssor_grid_slider = new $JssorSlider$(_name, options);
function sliderOnClick(slideIndex)
{
try
{
var fn=_name + "_clicked";
if(this.isSlideClicked==true)
{
window[fn].apply(null, [slideIndex, this.currentRowItem]);
}
this.isSlideClicked=false;
}
catch(e)
{
alert("Error :: sliderOnClick() :: " + e.Message);
}
}
jssor_grid_slider.$On($JssorSlider$.$EVT_CLICK, sliderOnClick);
}
catch(e)
{
alert("Error :: CreateGridSlider() :: " + e.Message);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
<script type="text/javascript" src="Release/JQueryLib/jssor.js"></script>
<script type="text/javascript" src="Release/JQueryLib/jssor.slider.js"></script>-->
<script type="text/javascript" src="Release/JQueryLib/jssor.slider.mini.js"></script>
<script type="text/javascript" src="./GridSlider.js"></script>
<title>Demo - Grid Slider</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script>
var Control1;
createSlider = function ()
{
try
{
//Grid
Control1 = new CreateGridSlider("slider1_container", document.getElementById("slider1_container"));
}
catch(e)
{
alert("Error : createSlider() : " + e.Message);
}
}
</script>
<!-- Slides Container -->
<input type="button" value="Load Slider Control" onclick="createSlider()" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 30px;"/>
<div id="slider1" width="900px" height="460px" style="position: absolute; top: 50px; left: 10px; width: 900px; height: 460px;background-color:#F8F8FF;">
<div id="slider1_container" class="carouselSlider" width="900" height="450" style="position: absolute; top: 0px; left: 10px; width: 900px; height: 450px; background-color:#F8F8FF;"></div>
</div>
</body>
</html>
但是，我面临以下问题：
1.Bullet导航器不适用于网格容器滑块和第一行滑块，而其他行滑块也是如此。
2.Arrow导航器（垂直前一个和下一个箭头）已经出现在网格容器滑块上，但点击箭头时没有任何反应。
3.单击行滑块中的图像，无法从rowSliderOnClick处理程序调用行特定方法。它总是调用绑定到最后一行滑块对象的方法。发布的代码没有方法绑定逻辑的实现。
答案 0 :(得分：0)
请为主滑块设置$UISearchMode为0。
如果$UISearchMode为1，主滑块将搜索（递归深度搜索）其容器范围内的第一个项目符号/箭头导航器，第一个子项的项目符号/箭头导航器将重新初始化为主滑块的子弹/箭头导航器。
如果$UISearchMode为0，它将搜索（无深度搜索）第一级的子元素。
所以，请替换
var options = { $AutoPlay: false, $AutoPlaySteps: 1, $AutoPlayInterval: 2000, $FillMode: 0, $Cols: 3, $SlideWidth: 900, $SlideHeight: 150, $ArrowKeyNavigation: false, $SlideDuration: 1000, $MinDragOffsetToSlide: 30, $SlideSpacing: 3, $Align: 0, $PauseOnHover: 3, $PlayOrientation: 2, $DragOrientation: 2, $BulletNavigatorOptions: gridBulletNavOptions, $ArrowNavigatorOptions: gridArrowNavOptions }
与
var options = { $UISearchMode: 0, $AutoPlay: false, $AutoPlaySteps: 1, $AutoPlayInterval: 2000, $FillMode: 0, $Cols: 3, $SlideWidth: 900, $SlideHeight: 150, $ArrowKeyNavigation: false, $SlideDuration: 1000, $MinDragOffsetToSlide: 30, $SlideSpacing: 3, $Align: 0, $PauseOnHover: 3, $PlayOrientation: 2, $DragOrientation: 2, $BulletNavigatorOptions: gridBulletNavOptions, $ArrowNavigatorOptions: gridArrowNavOptions }
答案 1 :(得分：0)
顺便说一句，您不需要jssorb03和jssora03 css的多份副本。
您可以将其移至<head>元素，而您只需要一份副本
<html>
<head>
...
<style type="text/css">
.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
background: url(../img/b05.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb03 div {
background-position: -5px -4px;
}
.jssorb03 div:hover, .jssorb03 .av:hover {
background-position: -35px -4px;
}
.jssorb03 .av {
background-position: -65px -4px;
}
.jssorb03 .dn, .jssorb03 .dn:hover {
background-position: -95px -4px;
}
</style>
<style type="text/css">
.jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a03.png) no-repeat;
overflow: hidden;
}
.jssora03l {
background-position: -3px -33px;
}
.jssora03r {
background-position: -63px -33px;
}
.jssora03l:hover {
background-position: -123px -33px;
}
.jssora03r:hover {
background-position: -183px -33px;
}
.jssora03ldn {
background-position: -243px -33px;
}
.jssora03rdn {
background-position: -303px -33px;
}
</style>
</head>
...
</html>
答案 2 :(得分：0)
回复：＃3
一切正常，但i在循环中发生了变化，i总是为4。
您可以创建代理函数以将i作为参数保存。
//Row Slider Object creation
for (var i = 0; i < 4; i++) {
var rowName = _name + "_row_" + i;
var jssor_row_slider = new $JssorSlider$(rowName, rowOptions);
function rowsliderOnClick(rowIndex, slideIndex) {
try { //Sets the row's slide index
this.currentRowItem = slideIndex;
this.isSlideClicked = true;
alert("row: " + rowIndex + " col: " + slideIndex);
}
catch (e) {
alert("Error :: sliderOnClick() :: " + e.Message);
}
}
jssor_row_slider.$On($JssorSlider$.$EVT_CLICK, $Jssor$.$CreateCallback(null, rowsliderOnClick, i));
this.nestedSliderObjects.push(jssor_row_slider);
}
请注意，在jssor库中，您可以使用$Jssor$.$CreateCallback创建代理功能。此API仅在jssor.slider.min.js而非jssor.slider.mini.js中可用。
jquery中的等效api是$.proxy。