Ionic + Angular.js实现图片轮播的方法示例
2017-05-21 15:14
896 查看
本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧。
先来看看实现的效果图:
方法示例:
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 }; })
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- 实现图片首尾平滑轮播(JS原生方法―节流)
- AngularJS+ui.bootstrap实现图片轮播
- Ionic + Angular.js实现验证码倒计时功能的方法
- JS实现简易图片轮播效果的方法
- Angular.js实现多个checkbox只能选择一个的方法示例
- Nodejs+angularjs结合multiparty实现多图片上传的示例代码
- js实现幻灯片播放图片示例代码
- javascript预加载图片、css、js的方法示例介绍
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- JS网页图片按比例自适应缩放实现方法
- JS实现图片翻书效果示例代码
- js实现图片轮播效果
- 实现首页图片轮播的方法
- js实现幻灯片播放图片示例代码
- js图片延迟加载的实现方法及思路
- JS实现图片翻书效果示例代码
- js实现图片放大缩小功能后进行复杂排序的方法
- js实现图片轮播(根据同事代码整理而得)
- 2个js实现图片轮播效果(用)
- js实现图片轮播