发表于: 2017-06-02 22:04:22

1 1368


今天完成的事情:

导航栏静态页面的编写,页脚静态页面的编写,点击切换城市功能的编写。


明天的计划:

首页banner轮播,最新职位静态页面的编写。


遇到的问题:

1 使用ui-bootstrap实现轮播图:

首先要引入插件:

 <script src="path/to/ui-bootstrap.min.js"></script>

<script src="path/to/ui-bootstrap-tpls.min.js"></script>

简化代码如下:

<div>

    <carousel interval="myInterval">

        <slide ng-repeat="slide in slides" active="slide.active">

            <img ng-src="{{slide.image}}" style="margin:auto;">

            <div class="carousel-caption">

                <p>{{slide.text}}</p>

            </div>

        </slide>

    </carousel>

</div>

js部分:

 function ($scope) {

          // 设置轮播图图片间隔

          $scope.myInterval = 5000;

          // 轮播图数据初始化

          var slides = $scope.slides = [];

          // 添加轮播图源

          slides.push({ image: '/Content/images/carousel_1.png', text: '啦' });

          slides.push({ image: '/Content/images/carousel_1.png', text: '啦' });


收获:

ui-bootstrap一些设置项:

uib-carousel settings(滑动设置项)

active  (Default: Index of first slide) - Index of current active slide. 

当前活动索引

interval $  (Default: none) - Sets an interval to cycle through the slides. You need a number bigger than 0 to make the interval work.

时间间隔

no-pause $  (Default: false) - The interval pauses on mouseover. Setting this to truthy, disables this pause.

鼠标悬停效果

no-transition $  (Default: false) - Whether to disable the transition animation between slides. Setting this to truthy, disables this transition.

是否禁用幻灯片之间的转换动画

no-wrap $ (Default: false) - Disables the looping of slides. Setting no-wrap to an expression which evaluates to a truthy value will prevent looping.

禁用幻灯片的循环

template-url (Default: uib/template/carousel/carousel.html) - Add the ability to override the template used on the component.




返回列表 返回列表
评论

    分享到