JSSOR滑块我无法链接导航箭头或项目符号以进行幻灯片切换

Question

我正在将JSSOR滑块添加到网页。它在页面上看起来不错，但导航箭头和子弹不连接到图像转换。我已经看过类似问题的其他反应，但无法弄清楚。此外，只有一颗子弹，我希望四颗子弹（因为我有四个图像）。帮助赞赏。

<div id="main_content"> <!-- Start Main Content --> 

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

    jssor_slider1_starter = function (containerId) { 

     //Reference http://www.jssor.com/development/slider-with-caption-no-jquery.html 
     //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition 
     //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html 




     var _CaptionTransitions = [ 
     //FADE 
     {$Duration:900,$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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze 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: 300,        //[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 
      $DisplayPieces: 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 
      $ParkingPosition: 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, 5 horizental reverse, 6 vertical reverse, 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) 

      $CaptionSliderOptions: {       //[Optional] Options which specifies how to animate caption 
       $Class: $JssorCaptionSlider$,     //[Required] Class to create instance to animate caption 
       $CaptionTransitions: _CaptionTransitions,  //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder 
       $PlayInMode: 1,         //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1 
       $PlayOutMode: 3         //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1 
      }, 

      $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 
       $AutoCenter: 1,         //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
       $Steps: 1,          //[Optional] Steps to go for each navigation request, default value is 1 
       $Lanes: 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 
       $Orientation: 1         //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1 
      }, 

      $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
       $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
       $AutoCenter: 2,         //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
       $Steps: 1          //[Optional] Steps to go for each navigation request, default value is 1 
      } 
     }; 
     var jssor_slider1 = new $JssorSlider$(containerId, options); 
     //responsive code begin 
     //you can remove responsive code if you don't want the slider scales while window resizes 
     function ScaleSlider() { 
      var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
      if (parentWidth) 
       jssor_slider1.$ScaleWidth(Math.min(parentWidth, 1000)); 
      else 
       $Jssor$.$Delay(ScaleSlider, 30); 
     } 

     ScaleSlider(); 
     $Jssor$.$AddEvent(window, "load", ScaleSlider); 


     if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) { 
      $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider)); 
     } 

     //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) { 
     // $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); 
     //} 
     //responsive code end 
    }; 
</script> 

<!-- Loading Screen --> 
    <div u="loading" style="position: absolute; top: 0px; left: 0px;"> 
     <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; 
      background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"> 
     </div> 
     <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center; 
      top: 0px; left: 0px;width: 100%;height:100%;"> 
     </div> 
    </div> 

    <!-- Slides Container --> 
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1000px; height: 420px; overflow: hidden;"> 
     <div> 
      <img u="image" src="Images/image5.jpg" /> 
      <div u=caption t="*" class="captionOrange" style="position:absolute; right:20px; top: 30px; width:300px; height:30px;"> 
      great location 
      </div> 
     </div> 
     <div> 
      <img u="image" src="Images/image7.jpg" /> 
      <div u=caption t="*" class="captionBlack" style="position:absolute; left:20px; top: 30px; width:300px; height:30px;"> 
      swimming pool 
      </div> 
     </div> 
     <div> 
      <img u="image" src="Images/image8.jpg" /> 
      <div u=caption t="*" class="captionOrange" style="position:absolute; right:20px; top: 30px; width:300px; height:30px;"> 
      lots of fun 
      </div> 
     </div> 
     <div> 
      <img u="image" src="Images/image9.jpg" /> 
      <div u=caption t="*" class="captionBlack" style="position:absolute; left:20px; top: 30px; width:300px; height:30px;"> 
      life's a beach 
      </div> 
     </div> 

     </div> 
    </div> 
    <!-- Bullet Navigator Skin Begin --> 
    <!-- jssor slider bullet navigator skin 01 --> 
    <style> 
     /* 
     .jssorb01 div   (normal) 
     .jssorb01 div:hover  (normal mouseover) 
     .jssorb01 .av   (active) 
     .jssorb01 .av:hover  (active mouseover) 
     .jssorb01 .dn   (mousedown) 
     */ 
     .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av { 
      filter: alpha(opacity=70); 
      opacity: .7; 
      overflow: hidden; 
      cursor: pointer; 
      border: #000 1px solid; 
     } 

     .jssorb01 div { 
      background-color: gray; 
     } 

      .jssorb01 div:hover, .jssorb01 .av:hover { 
       background-color: #d3d3d3; 
      } 

     .jssorb01 .av { 
      background-color: #fff; 
     } 

     .jssorb01 .dn, .jssorb01 .dn:hover { 
      background-color: #555555; 
     } 
    </style> 
    <!-- bullet navigator container --> 
    <div u="navigator" class="jssorb01" style="position: absolute; bottom: 50px; right: 50px;"> 
     <!-- bullet navigator item prototype --> 
     <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div> 
    </div> 
    <!-- Bullet Navigator Skin End --> 

    <!-- Arrow Navigator Skin Begin --> 
    <style> 
     /* jssor slider arrow navigator skin 02 css */ 
     /* 
     .jssora02l    (normal) 
     .jssora02r    (normal) 
     .jssora02l:hover  (normal mouseover) 
     .jssora02r:hover  (normal mouseover) 
     .jssora02ldn   (mousedown) 
     .jssora02rdn   (mousedown) 
     */ 
     .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn 
     { 
      position: absolute; 
      cursor: pointer; 
      display: block; 
      background: url(img/a02.png) no-repeat; 
      overflow:hidden; 
     } 
     .jssora02l { background-position: -3px -33px; } 
     .jssora02r { background-position: -63px -33px; } 
     .jssora02l:hover { background-position: -123px -33px; } 
     .jssora02r:hover { background-position: -183px -33px; } 
     .jssora02ldn { background-position: -243px -33px; } 
     .jssora02rdn { background-position: -303px -33px; } 
    </style> 
    <!-- Arrow Left --> 
    <span u="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 360px; left: 200px;"> 
    </span> 
    <!-- Arrow Right --> 
    <span u="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 360px; right: 200px"> 
    </span> 
    <!-- Arrow Navigator Skin End --> 

    <a style="display: none" href="http://www.jssor.com">javascript image slider</a> 
    <!-- Trigger --> 
    <script> 
     jssor_slider1_starter('slider1_container'); 
    </script> 
</div> 
<!-- Jssor Slider End --> 

Answer 1

请删除多余的 '</DIV>' 从你的代码。

在另一个字，请更换，

</div> 

    </div> 
</div> 
<!-- Bullet Navigator Skin Begin --> 
<!-- jssor slider bullet navigator skin 01 --> 

与

</div> 

</div> 
<!-- Bullet Navigator Skin Begin --> 
<!-- jssor slider bullet navigator skin 01 -->