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 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
javascript 动态创建表格
Jan 08 Javascript
JS获取时间的方法
Jan 21 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
js实现登录验证码
Dec 22 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
详解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实现异步调用方法研究与分享
2011/10/27 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
python进程与线程小结实例分析
2018/11/11 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
Python实现的读写json文件功能示例
2018/06/05 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python如何判断IP地址合法性
2020/04/05 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
瑞典度假品牌:OAS
2019/05/28 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
生物学学生自我评价
2014/01/17 职场文书
银行类自荐信
2014/02/04 职场文书
作文批改评语大全
2014/04/23 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS