在一个页面中的两个独立jssor滑块

Question

我在我的页面中使用了jssor滑块。首先，我只为主横幅部分使用了jssor滑块。稍后我想将此滑块包含在另一个功能部分中。我复制jssor_1_slider_init = function()并粘贴jssor_2_slider_init = function()。但它不起作用。 如何在一个页面中包含两个独立的jssor滑块？第一个代码正在工作，第二个不起作用。

<script type="text/javascript" src="js/jssor.slider.min.js"></script> 
    <!-- use jssor.slider.debug.js instead for debug --> 
    <script> 
     jssor_1_slider_init = function() { 

      var jssor_1_options = { 
       $AutoPlay: true, 
       $AutoPlaySteps: 4, 
       $SlideDuration: 160, 
       $SlideWidth: 200, 
       $SlideSpacing: 3, 
       $Cols: 4, 
       $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$, 
       $Steps: 4 
       }, 
       $BulletNavigatorOptions: { 
       $Class: $JssorBulletNavigator$, 
       $SpacingX: 1, 
       $SpacingY: 1 
       } 
      }; 

      var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); 

      //responsive code begin 
      //you can remove responsive code if you don't want the slider scales while window resizing 
      function ScaleSlider() { 
       var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; 
       if (refSize) { 
        refSize = Math.min(refSize, 809); 
        jssor_1_slider.$ScaleWidth(refSize); 
       } 
       else { 
        window.setTimeout(ScaleSlider, 30); 
       } 
      } 
      ScaleSlider(); 
      $Jssor$.$AddEvent(window, "load", ScaleSlider); 
      $Jssor$.$AddEvent(window, "resize", ScaleSlider); 
      $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); 
      //responsive code end 
     }; 
    </script> 

    <!-- use jssor.slider.debug.js instead for debug --> 
    <script> 
     jssor_2_slider_init = function() { 

      var jssor_2_options = { 
       $AutoPlay: true, 
       $AutoPlaySteps: 4, 
       $SlideDuration: 160, 
       $SlideWidth: 200, 
       $SlideSpacing: 3, 
       $Cols: 4, 
       $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$, 
       $Steps: 4 
       }, 
       $BulletNavigatorOptions: { 
       $Class: $JssorBulletNavigator$, 
       $SpacingX: 1, 
       $SpacingY: 1 
       } 
      }; 

      var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options); 

      //responsive code begin 
      //you can remove responsive code if you don't want the slider scales while window resizing 
      function ScaleSlider() { 
       var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; 
       if (refSize) { 
        refSize = Math.min(refSize, 809); 
        jssor_1_slider.$ScaleWidth(refSize); 
       } 
       else { 
        window.setTimeout(ScaleSlider, 30); 
       } 
      } 
      ScaleSlider(); 
      $Jssor$.$AddEvent(window, "load", ScaleSlider); 
      $Jssor$.$AddEvent(window, "resize", ScaleSlider); 
      $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); 
      //responsive code end 
     }; 
    </script> 


     <div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;"> 
     <!-- Loading Screen --> 
     <div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div> 
     <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;"> 
        <?php 
         $query="select img, heading from slide_images order by id desc"; 
         $result=$con->query($query)or die($con->error); 
         while($row=$result->fetch_assoc()){?> 
     <div id="non"> 
        <img src="images/<?php echo $row['img'];?>" /> 
        <div u="thumb"><?php echo $row['heading'];?></div> 
       </div> 
        <?php } ?> 
     </div> 
     </div> 

     <div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;"> 
     <!-- Loading Screen --> 
     <div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div> 
     <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;"> 
        <?php 
         $query="select img, heading from feature order by id desc"; 
         $result=$con->query($query)or die($con->error); 
         while($row=$result->fetch_assoc()){?> 
     <div id="non"> 
        <img src="images/<?php echo $row['img'];?>" /> 
        <div u="thumb"><?php echo $row['heading'];?></div> 
       </div> 
        <?php } ?> 
     </div> 
     </div> 
    <script> 
      jssor_1_slider_init(); 
      jssor_2_slider_init(); 
    </script> 

Answer 1

你有两个div id为 “jssor_1”，但没有使用id = “jssor_2”