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 相关文章推荐
onpropertypchange
Jul 01 Javascript
一个JavaScript继承的实现
Oct 24 Javascript
Firefox div高度自适应
Apr 28 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
swiper 自动图片无限轮播实现代码
May 21 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
再说下636单管机
2021/03/02 无线电
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
基于php-fpm的配置详解
2013/06/03 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python中DJANGO简单测试实例
2015/05/11 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
keras K.function获取某层的输出操作
2020/06/29 Python
python的链表基础知识点
2020/09/13 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
香港交友网站:be2香港
2018/07/22 全球购物
过滤器的用法
2013/10/08 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
给儿子的表扬信
2014/01/15 职场文书
高校教师岗位职责
2014/03/18 职场文书
毕业生实习证明
2014/09/19 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书