一页中有两个独立的 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

你有两个 id="jssor_1" 但 none id="jssor_2"

的 div

一页中有两个独立的 jssor 滑块

Two independent jssor sliders in one page

javascript

css

jquery

slider

jssor