首页 > 代码库 > 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 封装 自动滚动插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。