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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
浅谈js闭包理解
Apr 01 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
vue组件系列之TagsInput详解
May 14 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
php中文字符截取防乱码
2008/03/28 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
js传值 判断
2006/10/26 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
python爬虫之遍历单个域名
2019/11/20 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
销售总经理岗位职责
2014/03/15 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
应届生自荐信
2014/06/30 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2014年教师工作总结
2014/11/10 职场文书