2

仍然在这里学习角度,经过大量研究后可以使用一些帮助。

我要进行的非常简单的示例,我只是将 ng-style 指令应用于正文以更改背景

<body ng-app="myapp" ng-controller="mainController as main" ng-style="***need help here***">

控制器

 angular.module('mainCtrl', [])

.controller('mainController', function() {

    // set the view model as this scope
    var vm = this

    vm.slides = [
       { images: 'assets/imgs/blurred-highway.jpg' },
       { images: 'assets/imgs/night-square.jpg' }
    ]

})    

我对 ui.bootstrap 轮播不太满意,因此我希望实现一些更简单的东西;只是希望全屏背景每 3 秒无限循环通过幻灯片集合(最终将有 6-7 张照片),不需要额外的控件。

非常感谢您的帮助。

谢谢

4

1 回答 1

4

你只需要使用$interval
请注意,为了示例,我将您的图像替换为两种颜色:蓝色和红色。

这是HTML代码:

<body ng-app="myApp" ng-controller="mainController as main" ng-style="{'background-color': main.slide}">
   //content
  </body>

这是Javascript代码:

angular.module('myApp', [])

.controller('mainController', function($interval) {

    // set the view model as this scope
    var vm = this

    var slides = [
       'blue' ,
       'red'
    ];

    vm.slide = slides[0]; 
    $interval(function(){
      if(vm.slide == slides[0])
          vm.slide = slides[1];
      else
          vm.slide = slides[0];
    }, 3000, 0);


});    

这是相应的Plunkr

因此,你只需要用background-color你的图像替换颜色和background-image

于 2015-03-02T00:43:59.513 回答