Javascript JSSOR中的项目符号导航问题

我创建了一个javascript来交换滑块。单击bttn 1时，显示滑块1；单击btt2时，显示滑块2。当我交换两次时，bulletnavigator会在每个滑块上逐个减少项目符号。为什么会这样

 <script type="text/javascript" src="../js/jssor.core.js"></script>
    <script type="text/javascript" src="../js/jssor.utils.js"></script>
    <script type="text/javascript" src="../js/jssor.slider.js"></script>          

   <script type="text/javascript">
            var myFunction = function (containerId) { 
                var _SlideshowTransitions = 
        [
            //Fade in R
            {$Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade out L
            , { $Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
        ];

        var options = {
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1,                                   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 175,                                  //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0,                                   //[Optional] Space between each slide in pixels, default value is 0
            $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $Align: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                 //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            },

            $BulletNavigatorOptions: {                          //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$,                 //[Required] Class to create navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $Rows: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 10,                                  //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 10                                   //[Optional] Vertical space between each item in pixel, default value is 0
            },

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,                  //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2                                //[Required] 0 Never, 1 Mouse Over, 2 Always
            }

            /*$ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 0,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $DisableDrag: true                              //[Optional] Disable drag or not, default value is false
            }*/
        };
                var jssor_slider1 = new $JssorSlider$(containerId, options); };  
            </script>

           <div id="slider1_container" class="imgslider" style="position: relative; width:952px;height:400px;">                    
                                  <!-- Slides Container -->
                                    <div u="slides" style="cursor: pointer; position: absolute; left: 0px; top: 0px; overflow: hidden;width:952px;height:400px;">                        
                                        <div><img u="image" src="Image1.jpg" /></div>
                                        <div><img u="image" src="Image2.jpg" /></div>
<div><img u="image" src="Image3.jpg" /></div>
<div><img u="image" src="Image4.jpg" /></div>

                                    </div>                       
                                    <!-- bullet navigator container -->
                                     <div u="navigator" class="jssorb01" style="position: absolute; bottom: 15px; right: 15px;">
                                        <!-- bullet navigator item prototype -->
                                        <div u="prototype" style="POSITION: absolute; WIDTH: 20px; HEIGHT: 20px;"></div>
                                    </div>                        
                                    <!-- Bullet Navigator Skin End -->                            
                                        <!-- Arrow Left -->
                                        <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 154px; left: 8px;"></span>
                                        <!-- Arrow Right -->
                                      <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 154px; right: 8px"></span>
                                        <!-- Arrow Navigator Skin End -->                 
                                </div>
            <script>myFunction("slider1_container")</script>

<div id="slider2_container" class="imgslider" style="position: relative; width:952px;height:400px;">                    
                                  <!-- Slides Container -->
                                    <div u="slides" style="cursor: pointer; position: absolute; left: 0px; top: 0px; overflow: hidden;width:952px;height:400px;">                        
                                        <div><img u="image" src="Image1.jpg" /></div>
                                        <div><img u="image" src="Image2.jpg" /></div>

                                    </div>                       
                                    <!-- bullet navigator container -->
                                     <div u="navigator" class="jssorb01" style="position: absolute; bottom: 15px; right: 15px;">
                                        <!-- bullet navigator item prototype -->
                                        <div u="prototype" style="POSITION: absolute; WIDTH: 20px; HEIGHT: 20px;"></div>
                                    </div>                        
                                    <!-- Bullet Navigator Skin End -->                            
                                        <!-- Arrow Left -->
                                        <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 154px; left: 8px;"></span>
                                        <!-- Arrow Right -->
                                      <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 154px; right: 8px"></span>
                                        <!-- Arrow Navigator Skin End -->                 
                                </div>
            <script>myFunction("slider2_container")</script>

---

顺便说一句，请下载最新版本的性能好得多。使用jssor.js而不是jssor.core.js+jssor.utils.js。

需要完整的html+js代码编辑问题。请帮帮我。

<script type="text/javascript" src="../js/jssor.slider.min.js"></script>

<script type="text/javascript">
    var myFunction = function (containerId_1, containerId_2) {
        var _SlideshowTransitions =
        [
            //Fade in R
            { $Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade out L
            , { $Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
        ];

        var options = {
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1,                                   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 175,                                  //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0,                                   //[Optional] Space between each slide in pixels, default value is 0
            $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $Align: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                 //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            },

            $BulletNavigatorOptions: {                          //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$,                 //[Required] Class to create navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $Rows: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 10,                                  //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 10                                   //[Optional] Vertical space between each item in pixel, default value is 0
            },

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,                  //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2                                //[Required] 0 Never, 1 Mouse Over, 2 Always
            }

            /*$ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 0,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $DisableDrag: true                              //[Optional] Disable drag or not, default value is false
            }*/
        };
        var jssor_slider1 = new $JssorSlider$(containerId_1, options);
        var jssor_slider2 = new $JssorSlider$(containerId_2, options);

        //your code here to control the visibility of the slider
        //for example
        //$("slider1_container").hide();
        //$("slider2_container").show();
    };
</script>

<div id="slider1_container" class="imgslider" style="position: relative; width:952px;height:400px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: pointer; position: absolute; left: 0px; top: 0px; overflow: hidden;width:952px;height:400px;">
        <div><img u="image" src="Image1.jpg" /></div>
        <div><img u="image" src="Image2.jpg" /></div>
        <div><img u="image" src="Image3.jpg" /></div>
        <div><img u="image" src="Image4.jpg" /></div>

    </div>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb01" style="position: absolute; bottom: 15px; right: 15px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype" style="POSITION: absolute; WIDTH: 20px; HEIGHT: 20px;"></div>
    </div>
    <!-- Bullet Navigator Skin End -->
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 154px; left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 154px; right: 8px"></span>
    <!-- Arrow Navigator Skin End -->
</div>

<div id="slider2_container" class="imgslider" style="position: relative; width:952px;height:400px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: pointer; position: absolute; left: 0px; top: 0px; overflow: hidden;width:952px;height:400px;">
        <div><img u="image" src="Image1.jpg" /></div>
        <div><img u="image" src="Image2.jpg" /></div>

    </div>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb01" style="position: absolute; bottom: 15px; right: 15px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype" style="POSITION: absolute; WIDTH: 20px; HEIGHT: 20px;"></div>
    </div>
    <!-- Bullet Navigator Skin End -->
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 154px; left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 154px; right: 8px"></span>
    <!-- Arrow Navigator Skin End -->
</div>
<script>myFunction("slider1_container", "slider2_container");</script>