AngularJS driective Package Auto-Scroll Plugin

1.ui-smooth-scroll.js File Contents

Angular.module (' app '). Directive (' Uismoothscroll ', [' $location ', ' $anchorScroll ', function ($location, $anchorScroll {return {restrict: ' AC ', scope: {data: ' = '}, Templa                        TE: ' <div class= ' smooth-scroll-container ' > ' + ' <ul class= ' smooth-scroll ' > ' + ' <li ng-repeat= ' item in Data ' > ' + ' <a href= ' {{item.url}} ' ></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.getelementsbytagna                                Me (' li ') [0]);                            C.scrollleft = 0;                        };                    }, speed = 30;                    Ul.style.width = (width+13) * itemCount + + ' px ';                    var timer = setinterval (marquee, speed);                    C.onmouseover = function () {clearinterval (timer);                    };                    C.onmouseout = function () {timer = setinterval (marquee, speed);                };            },100);    }        }; }]);

How to use HTML

<div ui-smooth-scroll data= "Slides" >

Binding the data in the Controller

$scope. Slides = [{image: ' img/qy_lunbo_01.png '},{Image: ' Img/qy_lunbo_02.png '},{Image: ' Img/qy_lunbo_03.png '},{imag E: ' Img/qy_lunbo_04.png '}];

　　

Get!

AngularJS driective Package Auto-Scroll Plugin