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="{{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' }];

搞定!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏高爽的专栏

HTML锚点

        以前只是知道有锚点这么个东西,一直没有用到,昨天做毕设用到了锚点,现在总结一下控制锚点的几种情况:         1. 在同一页面中 <a n...

1700
来自专栏web开发

VUE滚动条插件——vue-happy-scroll

最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue...

421
来自专栏SpiritLing

js获取页面宽高

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc...

2964
来自专栏我分享我快乐

一线UI设计师对APP切图尺寸换算指导

工作后,很多同学还是会问到app切图尺寸的问题。今天分享android和iOS的换算分析,希望能帮到工作中的你。 1.在Android的显示模式为mdpi的时...

33914
来自专栏Coco的专栏

【前端攻略】最全面的水平垂直居中方案与flexbox布局

1583
来自专栏一“技”之长

自定义Window标题栏titleBar 原

    在进行OS X软件开发时,Window自带的标题栏十分简易,往往不能达到我们的需求,如下图:

672
来自专栏Youngxj

在线可视化编辑源码

2663
来自专栏deepcc

弹出层高度不限垂直居中 兼容ie ff chrome

3379
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之overflow

1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分...

2755
来自专栏偏前端工程师的驿站

JS魔法堂:关于元素位置和鼠标位置的属性

一、关于鼠标位置的属性                           1. 触发鼠标事件的区域       盒子模型中的border,padding,co...

17910

扫描关注云+社区