利用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 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
Javascript 面向对象之重载
May 04 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 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三层结构(上) 简单三层结构
2010/07/04 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php跨站攻击实例分析
2014/10/28 PHP
php学习笔记之基础知识
2014/11/08 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
Python学习资料
2007/02/08 Python
python 中的列表解析和生成表达式
2011/03/10 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python统计cpu利用率的方法
2015/06/02 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python基于event实现线程间通信控制
2020/01/13 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
什么是servlet链?
2014/07/13 面试题
四年的个人工作自我评价
2013/12/10 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
运动会解说词100字
2014/01/31 职场文书
青年教师培训方案
2014/02/06 职场文书
Redis如何实现分布式锁
2021/08/23 Redis