Javascript JSSOR网格滑块中的项目符号和箭头导航器问题

我已经动态创建了一个JSSOR网格滑块

//GridSlider.js
slider1\u容器\u单击=函数（行索引，行项目）
{
警报（“您已单击了第行“+（行索引+1）”上的幻灯片“+（行项目+1）+”）；
}
函数CreateGridSlider（_名称，_容器）
{
var jssor_网格_滑块；
//var jssor_行_滑块；
this.nestedSliders=[]；
this.nestedSliderObject=[]；
此.currentRowItem；
this.isSlideClicked=false；
函数BulletNavigatorStyle（）
{			
尝试
{
var bulletcss='.jssorb03 div、.jssorb03 div:hover、.jssorb03.av{background:url（images/b05.png）不重复；溢出：隐藏；游标：指针；}.jssorb03 div{background position:-5px-4px；}.jssorb03 div:hover、.jssorb03.av{background position:-35px-4px；}.jssorb03.av{background background position position:-65px-4px；}.jssorb03.dn、.jssorb03.dn:悬停{背景位置：-95px-4px；}'
bulletstyle=document.createElement（'style'）；
bulletstyle.type='text/css'；
if（bulletstyle.styleSheet）
{
bulletstyle.styleSheet.cssText=bulletcss；
}否则
{
appendChild（document.createTextNode（bulletcss））；
}
//_container.appendChild（bulletstyle）；
返回模式；
}
捕获（e）
{
警报（“错误：：幻灯片选项（）：：BulletNavigatorStyle（）：：”+e.Message）；
}
};
GridBBulletNavigatorStyle=函数（）
{			
尝试
{
var bulletcss='.jssorb02 div、.jssorb02 div:hover、.jssorb02.av{background:url（images/b02.png）不重复；溢出：隐藏；游标：指针；}.jssorb02 div{background position:-5px-5px；}.jssorb02 div:hover、.jssorb02.av{background position:-35px-5px；}.jssorb02.av{background background position position:-65px-5px；}.jssorb02.dn、.jssorb02.dn:悬停{背景位置：-95px-5px；}'
bulletstyle=document.createElement（'style'）；
bulletstyle.type='text/css'；
if（bulletstyle.styleSheet）
{
bulletstyle.styleSheet.cssText=bulletcss；
}否则
{
appendChild（document.createTextNode（bulletcss））；
}
//_container.appendChild（bulletstyle）；
返回模式；
}
捕获（e）
{
警报（“错误：：幻灯片选项（）：：GridBBulletNavigatorStyle（）：：”+e.Message）；
警报（“错误：：幻灯片选项（）：：GridBBulletNavigatorStyle（）：：”+e.Message）；
}
};
BulletNavigator=函数（）
{	
尝试
{
var divBulletNav=document.createElement（“div”）；
divBulletNav.setAttribute（“u”、“导航器”）；
divBulletNav.setAttribute（“类”、“jssorb03”）；
divBulletNav.setAttribute（“样式”，“位置：绝对；底部：10px；左侧：6px；”）；
//_container.appendChild（divBulletNav）；
var divTemplate=document.createElement（“div”）；
setAttribute（“u”、“原型”）；
setAttribute（“样式”、“位置：绝对；宽度：21px；高度：21px；文本对齐：居中；线条高度：21px；颜色：白色；字体大小：12px；”）；
divBulletNav.appendChild（divTemplate）；
返回导航；
}
捕获（e）
{
警报（“错误：：幻灯片选项（）：：BulletNavigator（）：：”+e.Message）；
}
};
GridBulletNavigator=函数（）
{	
尝试
{
var divBulletNav=document.createElement（“div”）；
divBulletNav.setAttribute（“u”、“导航器”）；
divBulletNav.setAttribute（“类”、“jssorb02”）；
divBulletNav.setAttribute（“样式”，“位置：绝对；底部：50px；左侧：6px；”）；
//_container.appendChild（divBulletNav）；
var divTemplate=document.createElement（“div”）；
setAttribute（“u”、“原型”）；
setAttribute（“样式”、“位置：绝对；宽度：21px；高度：21px；文本对齐：居中；线条高度：21px；颜色：白色；字体大小：12px；”）；
var divNumberTemplate=document.createElement（“div”）；
setAttribute（“u”，“numbertemplate”）；
appendChild（divNumberTemplate）；
divBulletNav.appendChild（divTemplate）；
返回导航；
}
捕获（e）
{
警报（“错误：：幻灯片选项（）：：BulletNavigator（）：：”+e.Message）；
}
};
HorizontalArrowNavigatorStyle=函数（）
{	
尝试
{
arrowcss='.jssora03l、.jssora03r、.jssora03ldn、.jssora03rdn{位置：绝对；光标：指针；显示：块；背景：url（images/a03.png）不重复；溢出：隐藏；}.jssora03l{背景位置：-3px-33px；}.jssora03r{背景位置：-63px-33px；}.jssora03l:hover{背景位置：-123px-33px；}.jssora03r:hover{背景位置：-183px-33px；}.jssora03ldn{背景位置：-243px-33px；}.jssora03rdn{背景位置：-303px-33px；}'
arrowstyle=document.createElement（'style'）；
arrowstyle.type='text/css'；
if（arrowstyle.styleSheet）{
arrowstyle.styleSheet.cssText=arrowcss；
}否则{
appendChild（document.createTextNode（arrowcss））；
}
//_container.appendChild（箭头样式）；
返回箭头样式；
}
捕获（e）
{
警报（“错误：：幻灯片选项（）：：箭头导航器水平样式（）：：”+e.Message）；
}
};
HorizontalArrowNavigatorPrevious=函数（）
{
尝试
{
divLeftArrowNav=document.createElement（“span”）；
divLeftArrowNav.setAttribute（“u”、“arrowleft”）；
divLeftArrowNav.setAttribute（“类”、“jssora03l”）；
setAttribute（“样式”，“宽度：55px；高度：55px；顶部：40%；左侧：8px；”）；
//_container.appendChild（divLeftArrowNav）；
返回左箭头导航；
}
捕获（e）
{
警报（“错误：：SliderOptions（）：：LeftArrowNavigatorHorizontal（）：：”+e.Message）；
}
};
HorizontalArrowNavigatorNext=函数（）
{	
尝试
{
divRightArrowNav=document.createElement（“span”）；
divRightArrowNav.setAttribute（“u”、“arrowright”）；
divRightArrowNav.setAttribute（“类”、“jssora03r”）；
DivRightArrow导航设置
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 }

<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>

//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);
}