zoukankan      html  css  js  c++  java
  • AngularJS:实现轮播图效果

    实现步骤如下:

    要实现这个功能,可以http://angular-ui.github.io/bootstrap/ 中的控件实现。实现步骤如下:

    1. 下载ui-bootstrap.js程序http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js 目前版本是0.11.0

    2. 在HTML中引入script

    <script type='text/javascript' src='path/to/angular.min.js'></script>
    <script src="path/to/ui-bootstrap.min.js"></script>
    <script src="path/to/ui-bootstrap-tpls.min.js"></script>

    3. HTML示例代码如下:

    <!-- 轮播图 -->
    <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>

    4. PostListController.js代码如下:

     1 ftitAppModule.controller('PostListController', 
     2     function ($scope) {
     3         // 设置轮播图图片间隔
     4         $scope.myInterval = 5000;
     5         // 轮播图数据初始化
     6         var slides = $scope.slides = [];
     7         // 添加轮播图源
     8         slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你,情人节快乐' });
     9         slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你,情人节快乐' });
    10 });

    最终效果:

  • 相关阅读:
    ajax的post请求
    ajax的get请求
    浏览器缓存机制
    php和cookie
    php表单(2)
    php和表单(1)
    枚举for/in
    .Matrix-Beta冲刺的汇总博客
    .Matrix汇总博客
    小黄衫获得的感想
  • 原文地址:https://www.cnblogs.com/ilovewindy/p/3777831.html
Copyright © 2011-2022 走看看