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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
对node.js中render和send的用法详解
May 14 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 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
简单的PHP图片上传程序
2008/03/27 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
python正则实现计算器功能
2017/12/14 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python实现转圈打印矩阵
2019/03/02 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
应届生护士求职信
2013/11/01 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
市场营销工作计划书
2014/05/06 职场文书
励志演讲稿600字
2014/08/21 职场文书
党员批评与自我批评
2014/10/15 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
小学运动会开幕词
2016/03/04 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Nginx实现负载均衡的项目实践
2022/03/18 Servers
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技