使用一个div获取多个值(动态)时,jssor滑块出现问题

时间:2015-01-07 04:53:31

标签: javascript php jquery html jssor

这里我使用jssor滑块,我需要在php中使用一个div(slider1_container)动态获取值,

有可能吗?

我试过下面的代码,

while($row = $result->fetch_assoc()) {
                        ?>
                        <div class="category-box1">
                                <div id="slider1_container" class="common" style="position: relative; top: 0px; left: 0px; width:220px; height: 147px;">
                                    <!-- Slides Container -->
                                    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width:220px; height:147px; cursor:pointer">
                                        <div class="imagecommon">
                                            <img class="img-responsive  center-block" alt="tour" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['thumbnail']?>" />
                                        </div>
                                        <div class="imagecommon">
                                            <img class="img-responsive  center-block" alt="tour1" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['image']?>" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 letter"><?php echo $row['title']?> </div>

                        </div>
                  <?php  }
                } ?>

<script>
     $(window).bind("load", function() {
 $(document).ready(function ($) {
    var options = { $AutoPlay: true };
    var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
});
</script>

注意:在此代码中获取值很好,但问题是只有一个滑块正在工作, 我需要所有滑块才能正常工作 怎么可能得到? 提前致谢

1 个答案:

答案 0 :(得分:1)

不同的滑块使用不同的名称,如果您将第一个滑块命名为“slider1”,请将第二个滑块命名为“slider2”。

while($row = $result->fetch_assoc()) {
                    ?>
                    <div class="category-box1">
                            <div id="slider2_container" class="common" style="position: relative; top: 0px; left: 0px; width:220px; height: 147px;">
                                <!-- Slides Container -->
                                <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width:220px; height:147px; cursor:pointer">
                                    <div class="imagecommon">
                                        <img class="img-responsive  center-block" alt="tour" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['thumbnail']?>" />
                                    </div>
                                    <div class="imagecommon">
                                        <img class="img-responsive  center-block" alt="tour1" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['image']?>" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 letter"><?php echo $row['title']?> </div>

                    </div>
              <?php  }
            } ?>

<script>
 $(window).bind("load", function() {
 $(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider2 = new $JssorSlider$('slider2_container', options);
});
});
</script>