利用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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
为原生js Array增加each方法
Apr 07 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
List Installed Hot Fixes
2007/06/12 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
Js四则运算函数代码
2012/07/21 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python WindowsError的错误代码详解
2017/07/23 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
西班牙在线药店:DosFarma
2020/03/28 全球购物
企业精神口号
2014/06/11 职场文书
受伤赔偿协议书
2014/09/24 职场文书