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;
}