基于ui-bootstrap写的Craousel——轮播

最新推荐文章于 2021-09-03 17:34:56 发布

xc9010

最新推荐文章于 2021-09-03 17:34:56 发布

阅读量295

点赞数

分类专栏：代码

本文链接：https://blog.csdn.net/xc9010/article/details/56830844

版权

代码专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Html

<div ng-controller="ctrl.banner">
    <div uib-carousel active="vm.banner.active"
         interval="vm.banner.myInterval"
         no-wrap="vm.banner.wrap" class="square-banner">
        <div uib-slide
             index="$index"
             ng-repeat="tab in vm.slide track by $index"
             >
            <img ng-src="{{::tab.pic_url}}" style="margin:auto;">
        </div>
    </div>
</div>

(function () {
    'use strict';
    angular.module('xiuzan')
        .controller('ctrl.banner', ['$scope',
            '$timeout', 'myUtils', 'http', bannerCtrl]);

    function bannerCtrl($scope, $timeout, myUtils, http) {
        var vm = $scope.vm = {};
        angular.extend(vm, {
            slide: [],
            init: function () {
                vm.getBanner();
            },

            banner: {
                active: 0,
                myInterval: 0,
                wrap: false
            },

            getBanner: function () {
                var bannerUrl = "./dist/json/sliders.json";
                http(bannerUrl).then(function (data) {
                    angular.forEach(data, function (tabs) {
                        tabs.backTheme = {
                            'background-color': tabs.theme
                        };
                        tabs.backPic = {
                            'background-image': 'url(' + tabs.pic_url + ')'
                        };
                    });
                    vm.slide = data;
                });
            }
        });
        vm.init();
    };
})();