ionic滑動框 ---輪播圖（ion-slide-box） 的使用

1. html :

 1  <ion-slide-box auto-play="true"   slide-interval=3000 show-pager="false" does-continue='true'>
 2    <ion-slide ng-repeat='foot in foots' pager-click='showCurrent($index)'>
 3       <div class='foot-item'>
 4           <div class='item-box'  flex="main:justify cross:center">
 5           　　<div class='item-info' flex="main:justify cross:center">
 6               　　<div class='foot-img'>
 7                     <img ng-src="{{foot.src}}" alt="user">
 8                  </div>
 9                  <div class='other-income'><span class='other-name'>{{foot.name}}</span>收入了￥<span>{{foot.money}}</span></div>
10               </div>
11               <div class='other-time'>{{foot.time}}分鐘前</div>
12           </div>
13        </div>
14     </ion-slide>
15 </ion-slide-box>

屬性使用：

auto-play="true"  // 設置滑動框是否循環播放，若是 does-continue 爲 true，默認也爲 true。

slide-interval=3000  // 時間間隔 ;

show-pager="false"   //是否顯示焦點；

does-continue='true'  //滑動框是否自動滑動;
pager-click= 'showCurrent($index)'  //當點擊頁面(焦點)時，觸發該表達式（若是shou-pager爲true）。傳遞一個'索引'變量。
on-slide-changed  ='slideCurrent($index)'  // 當滑動時，觸發該表達式。傳遞一個'索引'變量。

2. javascript:

update();  //更新滑動框

loop(true);  //布爾值 true:

以上兩個結合使用，解決幻燈片播放到最後一個不播放的問題：

angular.module('ionicApp', ['ionic'])

.controller('SlideController', function($scope) {
  
  $scope.showCurrent= function(index) {
       console.log(index);   // 打印當前點擊的焦點的 index值;     
    };

  $scope.slideCurrent = function(index) { 
　　console.log(index); // 滑動當前幻燈片的 index
}

})

enableSlide(false)  //布爾值  禁止手動滑動；

使用方法以下： // 能夠默認執行；

$ionicSlideBoxDelegate.update(); 
$ionicSlideBoxDelegate.loop(true);
$ionicSlideBoxDelegate.enableSlide(false); 

previous();    // 跳轉到上一個滑塊;若是在開始滑塊，就循環;

next();           // 跳轉到下一個滑塊。若是在結尾就循環;

stop();           // 中止滑動。滑動框將不會再被滑動，直到再次啓用;

currentIndex();    //  返回 當前滑塊的索引數值；

slidesCount();    //返回 當前滑塊的數目;

$getByHandle(handle);    //參數 handle， string類型；

例如: $ionicSlideBoxDelegate.$getByHandle('my-handle').stop();