使用AngularJS和玉石交叉淡化图像

时间:2016-10-02 21:20:35

标签: javascript angularjs pug image-gallery ng-animate

我是AngularJS的新手,想要为交叉淡入淡出图片库创建一个计时器,每隔几秒就会改变一次图像。

这是我已经拥有的:

角度控制器:

app.controller('aboutController', ['$scope', '$http', function ($scope, $http) {
    $scope.pageClass = 'page-about';

    $http.get('./assets/json/gallery.json').then(function (response) {
        //Parse and save json to array/object
        $scope.gallery_items = response.data;
    });

    $scope.selectedImage = 0;
    $scope.setSelected = function(selected){
    $scope.selectedImage = selected;
    }
}]);

玉模板:

     div
        a(data-ng-click="setSelected(0)")
            p Select 1
        a(data-ng-click="setSelected(1)")
            p Select 2
        a(data-ng-click="setSelected(2)")
            p Select 3
        div(data-ng-repeat="item in gallery_items" class="image-repeat")
            img(data-ng-src='{{item.img}}' alt="{{item.alt}}" title="{{item.title}}" data-ng-show="selectedImage==$index" data-ng-animate="{show: 'animate-show', hide: 'animate-hide'}").img-responsive

0 个答案:

没有答案