利用Angularjs实现幻灯片效果


Posted in Javascript onSeptember 07, 2016

前言

Jquery发展至今,幻灯组件已经非常成熟,所以下面小编带大家一起看看利用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:"#"}];
  });

总结

以上就是这篇文章的全部内容,希望这篇文章对大家能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
轻松掌握JavaScript状态模式
Sep 07 #Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 #Javascript
JS实现的幻灯片切换显示效果
Sep 07 #Javascript
javascript宿主对象之window.navigator详解
Sep 07 #Javascript
Angular 理解module和injector,即依赖注入
Sep 07 #Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 #Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 #Javascript
You might like
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
关于php开启错误提示的总结
2019/09/24 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python图形用户接口实例详解
2019/12/16 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python接口自动化框架实战
2020/12/23 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
药品采购员岗位职责
2014/02/08 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
求职信格式要求
2014/05/23 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
浅析Python OpenCV三种滤镜效果
2022/04/11 Python