小编给大家分享一下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"><h2>BLUE</h2></div>
</ion-slide-page>
<ion-slide-page>
<div class="box yellow"><h2>YELLOW</h2></div>
</ion-slide-page>
<ion-slide-page>
<div class="box pink"><h2>PINK</h2></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
};
})以上是“Ionic + Angular.js如何实现图片轮播”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
