Ionic + Angular.js实现图片轮播的方法示例


Posted in Javascript onMay 21, 2017

本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧。

先来看看实现的效果图:

Ionic + Angular.js实现图片轮播的方法示例

方法示例:

template文件夹新建slider.html

<ion-view view-title="图片轮播">
 <ion-content class="padding" scroll="false">
 <ion-slides class="slider-box" options="options" slider="data.slider">
  <ion-slide-page>
  <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide-page>
  <ion-slide-page>
  <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide-page>
  <ion-slide-page>
  <div class="box pink"><h1>PINK</h1></div>
  </ion-slide-page>
 </ion-slides>
 </ion-content>
</ion-view>

style.css

.slider-box {
 height: 300px;
}
.slider-box .box {
 width: 100%;
 height: 100%;
}
.yellow {
 background: #FFF68F;
}
.blue {
 background: #1E90FF;
}
.pink {
 background: #FF6A6A;
}

app.js:

.state('slider', {
 url: '/slider',
 views: {
 '': {
  templateUrl: 'templates/slider.html',
  controller: 'SliderCtrl'
 }
 }
})

controller.js:

.controller('SliderCtrl', function($scope) {
 $scope.settings = {
 enableFriends: true
 };
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
js制作支付倒计时页面
Oct 21 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
详解Angular2中Input和Output用法及示例
May 21 #Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 #Javascript
详解angularjs利用ui-route异步加载组件
May 21 #Javascript
如何在AngularJs中调用第三方插件库
May 21 #Javascript
详解Angular-Cli中引用第三方库
May 21 #Javascript
Angular2安装angular-cli
May 21 #Javascript
Angular2使用Augury来调试Angular2程序
May 21 #Javascript
You might like
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
php bootstrap实现简单登录
2016/03/08 PHP
javascript parseInt 大改造
2009/09/27 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
详解vue路由
2020/08/05 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python reduce 函数使用详解
2017/12/05 Python
详解Python:面向对象编程
2019/04/10 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python 实现简单的客户端认证
2020/07/29 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
如何现实servlet的单线程模式
2014/08/05 面试题
质量标语大全
2014/06/12 职场文书
售房协议书
2014/08/19 职场文书
党员个人对照检查材料
2014/10/01 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript