AngularJS driective 封装 自动滚动插件

Posted 2020-09-28 庞国明 博客

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\' }];

　　

 

搞定！