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' }];
搞定！