AngularJS driective 封装 自动滚动插件

1.ui-smooth-scroll.js文件内容

angular.module('app')
    .directive('uiSmoothScroll', ['$location', '$anchorScroll', function($location, $anchorScroll) {
        return {
            restrict: 'AC',
            scope: {
                data:"="
            },
            template: '<div class="smooth-scroll-container">'+
                    '<ul class="smooth-scroll">'+
                        '<li ng-repeat="item in data">'+
                            '<a  href="{{item.url}}" ><img ng-src="{{item.image}}" alt="" class="img-responsive" /></a>'+
                        '</li>'+
                    '</ul>'+
                '</div>',
            link: function(scope, element, attrs) {
                setTimeout(function(){
                    var c = $(element).find('.smooth-scroll-container')[0];
                    var ul = $(c).find('.smooth-scroll')[0];
                    var lis = ul.getElementsByTagName('li');
                    var itemCount = lis.length,
                        width = lis[0].offsetWidth,
                        marquee = function() {
                            c.scrollLeft += 2;
                            if (c.scrollLeft > width) {
                                ul.appendChild(ul.getElementsByTagName('li')[0]);
                                c.scrollLeft = 0;
                            };
                        },
                        speed = 30;
                    ul.style.width = (width+13) * itemCount + 40 + 'px' ;
                    var timer = setInterval(marquee, speed);
                    c.onmouseover = function() {
                        clearInterval(timer);
                    };
                    c.onmouseout = function() {
                        timer = setInterval(marquee, speed);
                    };
                },100);

            }
        };
    }]);

　　HTML 使用方法

 <div ui-smooth-scroll data="slides">

　　Controller 中对 数据的绑定

 $scope.slides = [{ image: 'img/qy_lunbo_01.png' },{ image: 'img/qy_lunbo_02.png' },{ image: 'img/qy_lunbo_03.png' },{ image: 'img/qy_lunbo_04.png' }];

　　

 

搞定！