【问题标题】:how to append element while jssor slider is sliding?jssor滑块滑动时如何附加元素?
【发布时间】:2015-04-05 11:07:35
【问题描述】:

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>

我需要从javasript函数中更改滑动div标签:

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);

success 的result 有一个列表(数字),我想每 2 秒更改一次 div 标签

当.append() 到div 样式崩溃并且滑块停止时..

我能做什么??

帮帮我..谢谢..

【问题讨论】:

  • 试试 $("
    "+result.list[k].number+"
    "+result.list[k].callnum+"
    "").appendTo('#slides');
  • nahh.. 一样,你有更多的想法吗?
  • 您确定此代码是否附加到您的#slides 中可能会正常工作
  • 是的..我试过它有同样的问题
  • 您不能动态更改幻灯片的数量。但您可以动态更改任何幻灯片的内容。

标签: javascript jquery html slider jssor


【解决方案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);

【讨论】:

  • 另外,您可以一次性重新加载幻灯片。 jssor_slider1.$ReloadSlides("html code of all slides");
  • 或jssor_slider1.$ReloadSlides(slideHtmlCodeArray);
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-09-24
  • 1970-01-01
  • 1970-01-01
  • 2010-10-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多