Blog

前端的HTML代码如下：

<div test-slide="{{imgs}}" data-time="3"></div>

指令testSlide代码：

.directive("testSlide", function ($interval) {
    return {
        restrict: 'A',
        replace: false,
        link: function (scope, ele, attr) {
            scope.imgs = JSON.parse(attr.testSlide);
            var time = parseFloat(attr.time);
            if (scope.imgs.length > 0 && time > 0) {
                if (typeof window.__slide === "object" && window.__slide != null) {
                    $interval.cancel(window.__slide);
                }
                window.__slide = $interval(function () {
                    var n = $(".slide>.active");
                    var c = $(".slide").children();

                    var index = -1;
                    $.each(c, function (i, n) {
                        if (i + 1 === c.length && index === -1) {
                            index = 0;
                        }
                        if ($(n).hasClass('active') === true && index === -1) {
                            index = i+1;
                        }
                    })

                    n.removeClass('active slideInRight');
                    $(c[index]).addClass('active slideInRight');

                    if(typeof c[index] === "undefined"){
                        $interval.cancel(window.__slide);
                    }
                }, time * 1000)
            }
        },
        template: '<div><style>\n' +
        '        .slide{width: 100%;}\n' +
        '        .slide .slide-img{width: 100%;display: none;}\n' +
        '        .slide .active{display: block;}\n' +
        '    </style><div class="slide">' +
        '   <div class="slide-img {{$first?\'active\':\'\'}}" ng-repeat="v in imgs">' +
        '       <img ng-src="{{v}}"/>' +
        '   </div>' +
        '</div></div>'
    }
})

功能实现了，但是可能需要增加一些动画效果，这里就懒得整了。