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 条评论
登录 后参与评论

相关文章

来自专栏c#开发者

lightswitch 添加 TreeView 控件

代码片段 <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presen...

3097
来自专栏Porschev[钟慰]的专栏

项目中对图片的缩放和水印效果

///<summary> /// 获取一个图片按等比例缩小后的大小。 ///</summary> ///<param name="maxWidth">需要缩小到...

1586
来自专栏落影的专栏

iOS开发-OpenGL ES魔方应用

分享 这系列收集OpenGL ES的应用。 iOS开发-OpenGLES画图应用 这篇介绍的3D魔方(原文地址),重点是魔方的旋转与点击的判断。 效果展示 ? ...

3559
来自专栏JarvanMo的IT专栏

基于ExoPlayer的ExoPlayerVideoView

在Android设备中,播放视频和音乐是非常普遍的。Android框架提供了一个对于媒体的操作的最省代码的解决方案:MediaPlayer。它提供了低等级的媒体...

1013
来自专栏向治洪

Android仿网易云音乐播放界面

概述 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅。这里抛砖引玉,原文地址:http://www.jianshu.co...

3106
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用②TodoList上)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

35110
来自专栏肖蕾的博客

用这个,自定义日历控件各种效果都不是问题

1374
来自专栏跟着阿笨一起玩NET

推荐一款DataGridView的打印解决方案

今天有朋友请教在CS的WinForm中如何打印DataGridView中的内容。 网上搜索一番之后,还是在藏宝库CodeProject中找到一篇好文章《Dat...

402
来自专栏一“技”之长

iOS原生地图开发指南续——大头针与自定义标注

在上一篇博客中http://my.oschina.net/u/2340880/blog/415360系统总结了iOS原生地图框架MapKit中主体地图的设置与应...

633
来自专栏hightopo

HT for Web列表和3D拓扑组件的拖拽应用

1112

扫码关注云+社区