ionic ion-slide-box网络加载图片，及时更新，无限循环

**1、ionic ion-slide-box实现有关的循环播放图片**

**2、显示页面中填写有关控件**

<ion-content scroll="true" padding="true">
      <div  class="home-slide">
          <ion-slide-box does-continue="true" auto-play="true" slide-interval="3000"  
               delegate-handle="slideboximgs">
              <ion-slide ng-repeat="infoTop in mainTopInfoPlayer">
                  <img ng-src="{{infoTop.photo.url}}">
              </ion-slide>
          </ion-slide-box>
      </div>

注解：
1、ion-slide：中的数据不再阐述;这里会出现加载图片不出来的情况，需要代理在controller重绘界面；
2、does-continue：是否循环切换,开头的幻灯页只能向左滑动，最后的幻灯页只能向右滑动。 将does-continue属性值设为true，就可以让幻灯页组首尾连接起来，循环切换。 但是加载网络图片时候有bug,加载本地图片没有问题；
3、auto-play：是否自动播放，通过将auto-play属性设置为true，可以让幻灯页自动切换。切换的间隔通过属性slide-interval进行调整，这里是3000ms。
4、delegate-handle：controller中的代理，用这个参数识别对话框

**3、controller里面的配置**

 $scope.$on('home.maintopfinish', function() {
          HomeFactory.getMainPage();
         var mainInfoTopList= HomeFactory.getMainPageTopInfo();
          $scope.mainTopInfoPlayer=mainInfoTopList.player;
          $log.info("mainInfoTopList",$scope.mainTopInfoPlayer);
          $ionicSlideBoxDelegate.update();
          $ionicSlideBoxDelegate.$getByHandle("slideboximgs").loop(true);
          //上面这句就是实现无限循环的关键，绑定了滑动框，
      });

注解：
1、$ionicSlideBoxDelegate.update(); 就是当容器尺寸发生变化时，需要调用update()方法重绘幻灯片，更新滑动框（例如，用带有ng-repeat的Angular，调整它里面的元素）。

**4、有关 ion-slide中图片和slider-pager的配置**

style.css中配置，效果自行修改看效果，不再详细说明

.home-slide  ion-slide img{
    height: 150px;
    width: 100%;
}
.slider-pager {
    position: absolute;
    bottom: 20px;
    width: 98%;
    height: 5px;
    text-align: right;
}

.slider-pager .slider-pager-page {
    display: inline-block;
    margin: 0px 3px;
    width: 12px;
    color: #29C1E5;
    text-decoration: none;
    opacity: 0.3;
    font-size: 10px;
}