ionic之ion-slide-box实现图片轮播

实现效果

我是代码

html代码

 <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true"
                       slide-interval=2000 show-pager="true" pager-click="pageClick(index)"
                       active-slide="model.activeIndex" delegate-handle="delegateHandler" ng-click="coverFlowClick()">
          <ion-slide>
            <div class="box">
              <img src="http://img9.tu11.com:8080/picture/121022/pic5/14.jpg">
            </div>
          </ion-slide>
          <ion-slide>
            <div class="box">
              <img src="http://down77.yousiji.com/uploads1/allimg/c101123/12Z4Qc10S10-193502.jpg">
            </div>
          </ion-slide>
          <ion-slide>
            <div class="box">
              <img src="http://img.mm522.net/flashAll/20120206/13285185634aUfhU.jpg">
            </div>
          </ion-slide>
        </ion-slide-box>

controller代码

.controller('articlePageCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', 'FinancList', '$timeout', // TIP: Access Route Parameters for your page via $stateParams.parameterName
    function ($scope, $stateParams, $ionicSlideBoxDelegate, FinancList, $timeout) {

      $scope.articles = [{id: 0, avatar: 1, img: 2, title: 3, des: 4, see: 5},
        {id: 1, avatar: 1, img: 2, title: 3, des: 4, see: 5}];
      //为了验证属性active-slide定义的模型，angularjs是mvc模式
      $scope.model = {
        activeIndex: 0
      };
      //滑动图片的点击事件
      $scope.coverFlowClick = function () {
        var index = $ionicSlideBoxDelegate.currentIndex();
        console.log("coverFlowClick index = ", index);
      }
      //此事件对应的是pager-click属性，当显示图片是有对应数量的小圆点，这是小圆点的点击事件
      $scope.pageClick = function (index) {
        //alert(index);
        console.log("pageClick index = ", index);
        $scope.model.activeIndex = index;
      };

      //当图片切换后，触发此事件，注意参数
      $scope.slideHasChanged = function ($index) {
        //alert($index);
        //console.log("slideHasChanged index = ", $index);
      };
      //这是属性delegate-handle的验证使用的，其实没必要重定义，直接使用$ionicSlideBoxDelegate就可以
      $scope.delegateHandle = $ionicSlideBoxDelegate;
 }])

注意

ion-slide-box这个控件，如果你只有两个元素的话，它会生成四个重复的元素，目测是ionic的一个bug，不知道有人解决了没，所以我的解决办法是，如果是两个，就插入了一张广告图片。