如何动态地使用jssor添加Carousel图片

Question

如何动态地使用jssor添加Carousel图片 我的代码： 菜单幻灯片...

<div id="slider1_container">
                    <!-- 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: #000; 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" class="slider1_container">
                        <div><img u="image" src="image/house_5.jpg" /></div>
                        <div><img u="image" src="image/house_4.jpg" /></div>
                        <div><img u="image" src="image/house_3.jpg" /></div>
                        <div><img u="image" src="image/house_2.jpg" /></div>
                        <div><img u="image" src="image/house_1.jpg" /></div>
                    </div>

                    <span u="arrowleft" class="jssora03l">
                    </span>
                    <span u="arrowright" class="jssora03r">
                    </span>

                    <script>
                        jssor_slider1_starter('slider1_container');
                    </script>
                </div>

幻灯片......

<div id="slider2_container">
                    <!-- 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" class="slider2_container">
                        <div>
                            <img u="image" src="image/house_11.jpg" />
                            <img u="thumb" src="image/house_11_abb.jpg" />
                        </div>
                        <div>
                            <img u="image" src="image/house_11.jpg" />
                            <img u="thumb" src="image/house_11_abb.jpg" />
                        </div>
                        <div>
                            <img u="image" src="image/house_11.jpg" />
                            <img u="thumb" src="image/house_11_abb.jpg" />
                        </div>
                        <div>
                            <img u="image" src="image/house_11.jpg" />
                            <img u="thumb" src="image/house_11_abb.jpg" />
                        </div>
                        <div>
                            <img u="image" src="image/house_11.jpg" />
                            <img u="thumb" src="image/house_11_abb.jpg" />
                        </div>
                    </div>

                    <span u="arrowleft" class="jssora02l">
                    </span>
                    <span u="arrowright" class="jssora02r">
                    </span>

                    <!-- thumbnail navigator container -->
                    <div u="thumbnavigator" class="jssort03">
                        <!-- Thumbnail Item Skin Begin -->
                        <div u="slides" class="slide_item">
                            <div u="prototype" class="p">
                                <div class=w><div u="thumbnailtemplate" class="t"></div></div>
                                <div class=c></div>
                            </div>
                        </div>
                        <!-- Thumbnail Item Skin End -->
                    </div>
                    <script>
                        //jssor_slider2_starter('slider2_container');
                    </script>
                </div>

JS代码...... ...

var jssor_slider1 = new $JssorSlider$(containerId, options);
    jssor_slider1.$On($JssorSlider$.$EVT_CLICK,function(sliderIndex,eventData){
        console.log(sliderIndex);
        if(sliderIndex == 0){
            $('.slider2_container').html('');
            var imgHtmls = '';
            for(var i=0;i<imgData.gaojifang.length;i++){
                imgHtmls += '<div><img u="image" src="'+imgData.gaojifang[i]+'" /><img u="thumb" src="'+imgData.gaojifang[i]+'" /></div>'
            }
            $('.slider2_container').html(imgHtmls);
            jssor_slider2_starter('slider2_container');
        }else if(sliderIndex == 1){
            $('.slider2_container').html('');
            var imgHtmls = '';
            for(var i=0;i<imgData.gaojishanjingfang.length;i++){
                imgHtmls += '<div><img u="image" src="'+imgData.gaojifang[i]+'" /><img u="thumb" src="'+imgData.gaojifang[i]+'" /></div>'
            }
            $('.slider2_container').html(imgHtmls);
            jssor_slider2_starter('slider2_container');
        }

    });

...

效果图：

我该怎么办，谢谢...

Answer 1

Jssor滑块适用于固定数量的幻灯片。 目前，不支持动态添加/删除幻灯片。

替换内容的方法是替换任何幻灯片中的内容。