首页 > 代码库 > AngularJS driective 封装 自动滚动插件

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="http://www.mamicode.com/{{item.url}}" ><img ng-src="http://www.mamicode.com/{{item.image}}"  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="http://www.mamicode.com/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‘ }];

  

技术分享

 

搞定!

 

AngularJS driective 封装 自动滚动插件