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