脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Ionic + Angular图片轮播

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

 更新时间：2017年05月21日 15:14:29   作者：lakerHQ  
图片轮播在我们日常开发中是再熟悉不过的了，下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。

本文主要给大家介绍了关于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
 };
})

总结

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

您可能感兴趣的文章:

相关文章

  • Angular下H5上传图片的方法（可多张上传）

    Angular下H5上传图片的方法（可多张上传）

    本文给大家分享在使用angular上传图片的功能，在开发过程中遇到很多问题，最终都解决了，今天小编给大家介绍下Angular下H5上传图片的方法（可多张上传),非常不错，需要的朋友参考下
    2017-01-01
  • Angular实现点击按钮控制隐藏和显示功能示例

    Angular实现点击按钮控制隐藏和显示功能示例

    这篇文章主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与隐藏的相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • angular2 ng2-file-upload上传示例代码

    angular2 ng2-file-upload上传示例代码

    这篇文章主要介绍了angular2 ng2-file-upload上传示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Angular实现跨域(搜索框的下拉列表)

    Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp，实现跨域，下面来实现搜索框的下拉列表功能，本文思路明确，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-02-02
  • AngularJS 使用$sce控制代码安全检查

    AngularJS 使用$sce控制代码安全检查

    SCE，即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问，通过本文给大家介绍AngularJS 使用$sce控制代码安全检查，对angularjs sce相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • AngularJs动态加载模块和依赖注入详解

    AngularJs动态加载模块和依赖注入详解

    这篇文章主要为大家介绍了AngularJs动态加载模块和依赖注入，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Angular 2父子组件之间共享服务通信的实现

    Angular 2父子组件之间共享服务通信的实现

    这篇文章主要给大家介绍了关于Angular 2父子组件之间共享服务通信的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • Angular2中如何使用ngx-translate进行国际化

    Angular2中如何使用ngx-translate进行国际化

    本篇文章主要介绍了Angular2中使用ngx-translate进行国际化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 详解为Angular.js内置$http服务添加拦截器的方法

    详解为Angular.js内置$http服务添加拦截器的方法

    所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器，每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。
    2016-12-12
  • angular.js + require.js构建模块化单页面应用的方法步骤

    angular.js + require.js构建模块化单页面应用的方法步骤

    这篇文章主要给大家介绍了关于利用angular.js + require.js构建模块化单页面应用的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07

最新评论