1.ui-smooth-scroll.js文件内容
代码语言：javascript复制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 使用方法
代码语言：javascript复制 <div ui-smooth-scroll data="slides">Controller 中对 数据的绑定
代码语言：javascript复制 $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' }];
搞定！
