如何在jssor滑块滑动时附加元素?

时间:2015-04-05 11:07:35

标签: javascript jquery html slider jssor

HTML:

<div id="slider1_container" class="slider left">
    <div u="slides" id="slides" style="position: absolute; left: 0px; top: 0px; width: 700px; height: 710px; overflow: hidden;">
        <div class="sliderow">
            <div class="cell room">102</div>
            <div class="cell patient">1002</div>
        </div>
        <div class="sliderow">
            <div class="cell room">103</div>
            <div class="cell patient">1003</div>
        </div>                          
    </div>
</div>

我需要更改div函数的滑动javasript标记:

var options = {
        $AutoPlay : true,
        $AutoPlaySteps : 5,
        $AutoPlayInterval : 2500,

        $ArrowKeyNavigation : true,
        $SlideDuration : 300, 
        $SlideWidth : 700,
        $SlideHeight : 140,
        $SlideSpacing : 3,
        $DisplayPieces : 5,
        $PlayOrientation : 2,
        $DragOrientation : 2

    };

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

setInterval(function(){
    $.ajax({
          url : 'GetList',
          type : 'post',
          dataType : 'json',
          async : false,
          success : function(result){
               for(var k = 0; result.list.length > k; k++){
                    if(k == 0){
                         $("#slides").html("<div class='sliderow'><div class='cell room'>"+result.list[k].number+"</div><div class='cell patient'>"+result.list[k].callnum+"</div></div>");
                    }else{
                         $("#slides").append("<div class='sliderow'><div class='cell room'>"+result.list[k].number+"</div><div class='cell patient'>"+result.list[k].callnum+"</div></div>");
                    }
               }
          }
    });
}, 2000);
result的{​​{1}}个success有一个列表(数字),每2秒我想要更改div个标签

.append()div时,样式崩溃且滑块停止..

我该怎么办?

帮帮我......谢谢..

1 个答案:

答案 0 :(得分:1)

就我而言,我通过使用以下代码解决了该问题。

var options = {
        $AutoPlay : true,
        $AutoPlaySteps : 5,
        $AutoPlayInterval : 2500,

        $ArrowKeyNavigation : true,
        $SlideDuration : 300, 
        $SlideWidth : 700,
        $SlideHeight : 140,
        $SlideSpacing : 3,
        $DisplayPieces : 5,
        $PlayOrientation : 2,
        $DragOrientation : 2

    };

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

setInterval(function(){
    $.ajax({
          url : 'GetList',
          type : 'post',
          dataType : 'json',
          async : false,
          success : function(result){
               for(var k = 0; result.list.length > k; k++){
                    if(k == 0){
                         jssor_slider1.$ReloadSlides("<div class='sliderow'><div class='cell room'>"+result.list[k].number+"</div><div class='cell patient'>"+result.list[k].callnum+"</div></div>");
                    }else{
                         jssor_slider1.$AppendSlides("<div class='sliderow'><div class='cell room'>"+result.list[k].number+"</div><div class='cell patient'>"+result.list[k].callnum+"</div></div>");
                    }
               }
          }
    });
}, 2000);