zoukankan      html  css  js  c++  java
  • amazeUI——JS插件slider使用注意事项

    amazeUI官网:http://amazeui.shopxo.net/javascript/slider/

    我的问题:  轮播图放在模态框里的,一开始不显示但初始化了slider,点击时显示轮播图,但是最初几秒没图,要过几秒才会有图。

    html:

    <div class="am-modal am-modal-no-btn" tabindex="-1" id="modal_img"
            style="border-radius: 5px;">
            <div class="am-modal-dialog am-panel am-panel-default"
                style=" 50%;max-height:90%; border-radius: 10px; overflow-x: hidden;">
                <div class="am-panel-hd myPasTitle" style="color: #bd471e;">
                    轮播图<a href="javascript: void(0)" class="am-close am-close-spin"
                        style="float: right;" data-am-modal-close>&times;</a>
                </div>
                <div ng-if="imgsList.length>0" class="am-slider am-slider-default"
                    data-am-flexslider style="padding: .7rem;">
                    <ul class="am-slides">
                        <li ng-repeat="path in imgsList">
                  <img ng-src="{{path == ''||path == null?'':path}}" />
                </li> </ul> </div> </div> </div>

     <script>
        $('.am-slider').flexslider({

          slideshow: false  //是否自动播放

      });

     </script>

    js:

    $scope.open_img = function(){  //点击打开模态框
        $("#modal_img").modal();
    };

    解决方法: 将轮播图初始化放在模态框显示后。

    $scope.open_imgclick = function(){
        $("#modal_img").modal();
        if($scope.imgsList.length>0){
            $('.am-slider').flexslider({
                slideshow: false
            });
        }
    };
  • 相关阅读:
    flink checkpoint机制的实现
    openjdk源码分析之AtomicLong
    cpp之宏和函数调用约定
    JNA 相关问题
    spark RDD
    最长连续序列
    买卖股票的最佳时机
    二叉树展开为链表
    不同的二叉搜索树
    柱状图中最大的矩形
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/12123030.html
Copyright © 2011-2022 走看看