Ionic + Angular.js實現圖片輪播的方法示例

更新時間：2017年05月21日 15:14:29 作者：lakerHQ

圖片輪播在我們日常開發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了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上傳圖片的功能，在開發(fā)過程中遇到很多問題，最終都解決了，今天小編給大家介紹下Angular下H5上傳圖片的方法（可多張上傳),非常不錯，需要的朋友參考下
2017-01-01
Angular實現點擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實現點擊按鈕控制隱藏和顯示功能,結合實例形式分析了AngularJS簡單控制頁面元素顯示與隱藏的相關操作技巧,需要的朋友可以參考下
2017-12-12
angular2 ng2-file-upload上傳示例代碼
這篇文章主要介紹了angular2 ng2-file-upload上傳示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Angular實現跨域(搜索框的下拉列表)
angular.js 自帶jsonp，實現跨域，下面來實現搜索框的下拉列表功能，本文思路明確，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-02-02
AngularJS 使用$sce控制代碼安全檢查
SCE，即strict contextual escaping,我的理解是嚴格的上下文隔離 ...翻譯的可能不準確，但是通過字面理解，應該是angularjs嚴格的控制上下文訪問，通過本文給大家介紹AngularJS 使用$sce控制代碼安全檢查，對angularjs sce相關知識感興趣的朋友一起學習吧
2016-01-01
AngularJs動態(tài)加載模塊和依賴注入詳解
這篇文章主要為大家介紹了AngularJs動態(tài)加載模塊和依賴注入，感興趣的小伙伴們可以參考一下
2016-01-01
Angular 2父子組件之間共享服務通信的實現
這篇文章主要給大家介紹了關于Angular 2父子組件之間共享服務通信的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-07-07
Angular2中如何使用ngx-translate進行國際化
本篇文章主要介紹了Angular2中使用ngx-translate進行國際化，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
詳解為Angular.js內置$http服務添加攔截器的方法
所謂攔截器就是在目標達到目的地之前對其進行處理以便處理結果更加符合我們的預期。Angular的$http攔截器是通過$httpProvider.interceptors數組定義的一組攔截器，每個攔截器都是實現了某些特定方法的Factory。本文就介紹了為Angular.js內置$http服務添加攔截器的方法。
2016-12-12
angular.js + require.js構建模塊化單頁面應用的方法步驟
這篇文章主要給大家介紹了關于利用angular.js + require.js構建模塊化單頁面應用的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-07-07