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