ionic 左右滑动 广告

 

使用ion-slide-box 命令做效果

<ion-slide-box>
<ion-slide ng-repeat="item in lists">
<div class="box blue">
<a href="{{item.url}}" title="">
<img src="{{item.img}}" class="img_responsive">
</a>
</div>
</ion-slide>
</ion-slide-box>

 

控制器从服务器获取广告数据

//进入家政服务的导航页面
angular.module("jiazhengApp").controller("jiazhengIndexController", ["$scope", "$state", '$http',
'khbjIndexService', 'jiazhengChuchenChumanService','jiazhengAppService',
function ($scope, $state, $http,khbjIndexService,jiazhengChuchenChumanService,jiazhengAppService) {

var url = "/index.php/Wap/Homemake/jzIndexAd.html";
var p = $http.post(url);
p.success(function(response,header,config,status){
if(response.status == 1){
$scope.lists = response.data;
setTimeout('$(".box.blue").css("width",document.body.clientWidth+"px");
$(".slider-slides").css("width","0px");',500);
}
});

}]);

 

 



 

备注说明：

1、.slider-slides 控件的高度为0，整个广告位的高度由img图片撑开

2、img的图片为显示器的实际宽度

3、.img_responsive 的样式说明 ：

.img_responsive {
display: block;
max-width: 100%;
height: auto;
}

 

 


 

 





大小: 55.1 KB




大小: 74.8 KB
查看图片附件