Jssor非jquery滑块动态数量多个滑块在一个页面上

时间:2015-05-05 20:20:08

标签: jssor

如何在单个页面上放置动态金额多个滑块?我可以在页面上使用2个滑块,如下所示:

<script>
jssor_sliderb_starter1 = function (containerId) {
    ...
};
jssor_sliderb_starter2 = function (containerId) {
    ...
};

<div id="sliderb_container1">
...
<script>
    jssor_sliderb_starter1('sliderb_container1');
</script> </div> 

<div id="sliderb_container2">
...
<script>
    jssor_sliderb_starter2('sliderb_container2');
</script> </div>

但是如果我不知道滑块的数量呢?请帮忙..

2 个答案:

答案 0 :(得分:0)

我在页面上添加了4个相同的滑块,带有不同的图像和标题,并使用以下代码,它可以正常工作。

<!-- Jssor Sliders -->
    <script>
    jssor_sliderb_starter = function (containerId) {
    ...
    };
    </script>


    <!-- Jssor Slider Begin -->
    <div id="sliderb_container1" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container1');
        </script>
    </div>

    <div id="sliderb_container2" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container2');
        </script>
    </div>

    <div id="sliderb_container3" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container3');
        </script>
    </div>

    <div id="sliderb_container4" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container4');
        </script>
    </div>
    <!-- Jssor Slider End -->

所以现在如果我添加更多滑块,我将只能使用不同的ID。我对如何使用id调用函数感到困惑,并认为我必须为每个滑块编写不同的函数。但代码工作正常。谢谢:)

答案 1 :(得分:0)

<!-- Jssor Sliders -->
<script>
   jssor_sliderb_starter = function (containerId) {
   }
</script>

<div id="sliders">
    <!-- Jssor Slider Begin -->
    <div class="sliderb_con">
    </div>

    <div class="sliderb_con">
    </div>

    <div class="sliderb_con">
    </div>

    <div class="sliderb_con">
    </div>
    <!-- Jssor Slider End -->
</div>

<script>
    var slidersElement = document.getElementById("sliders");
    for (var tmpEl = slidersElement.firstChild; tmpEl; tmpEl =tmpEl.NextSibling) {
        if (tmpEl.nodeType == 1) {
            jssor_sliderb_starter(tmpEl);
        }
    }
</script>