Angularjs 实现一个幻灯片示例代码


Posted in Javascript onSeptember 08, 2016

基于angularjs制作的幻灯片

Angularjs 实现一个幻灯片示例代码

演示地址

npm方式安装

npm install  angularjsSlider

使用方法

第一步(引入)

require('angularjsSlider')(moduleName);//引入

第二步(参数配置)

类型 说明
data Array 幻灯片图片数据 [{img: "1.jpg",link:'#'}...]
timer Number 幻灯片切换间隔timer="2"
btn-left String 左侧切换按钮btn-left="#btnleft"
btn-right String 右侧切换按钮btn-right=".btnright"
animate-type String 切换动画方式animate-type="ease"
animate-time String 切换动画时间animate-time="1.0"秒

第三步(插入标签)

<slider></slider>//插入html标签

<div class="sliderBox" ng-controller="firstCtrl">
    <slider timer="2" data="data" btn-left="#btnleft" btn-right=".btnright" animate-type="ease" animate-time="1.0">
    </slider>
    <div class="btn left" id="btnleft"></div>
    <div class="btn right btnright"></div>
  </div>
var myModule = angular.module('myApp',[]);
  myModule.controller('firstCtrl', function($scope) {
    $scope.data = [{img: "../img/1.jpg",link:"#"}];
  });

以上就是对AngularJS 的实现幻灯片资料,后续继续整理相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
详解vuex的简单使用
Mar 12 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
利用Vue.js指令实现全选功能
Sep 08 #Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 #Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 #Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 #Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 #Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 #Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 #Javascript
You might like
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python切片用法实例教程
2014/09/08 Python
python解析xml文件操作实例
2014/10/05 Python
python链接Oracle数据库的方法
2015/06/28 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python 递归函数详解及实例
2016/12/27 Python
Python机器学习之决策树算法
2017/12/22 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Django之form组件自动校验数据实现
2020/01/14 Python
抽象方法、抽象类怎样声明
2014/10/25 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
高校生生产实习自我鉴定
2013/09/21 职场文书
自我鉴定的范文
2013/10/03 职场文书
个人找工作的自我评价
2013/10/17 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
养牛场项目建议书
2014/05/13 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
学习党史心得体会2016
2016/01/23 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers