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

• 查看图片附件