使用ionic播放轮询广告的实现方法(必看)

时间：2021-05-25

使用ionic中的ion-slide-box实现，下面是完整的代码示例：

<!DOCTYPE html><html ng-app="app"><head> <meta charset="utf-8"> <title>ionic-demo</title> <link href="../lib/ionic/css/ionic.css" rel="external nofollow" rel="stylesheet"> <script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script> <style type="text/css"> div.box{ width: 100%; height: 320px; } div.box > img{ width: 100%; height: 100%; } </style> </head><body ng-controller="ctrl"> <ion-view> <ion-content> <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)" active-slide="model.activeIndex" delegate-handle="delegateHandler"> <ion-slide> <div class="box blue" ui-sref="list" > <img src="https://d2.sinaimg.cn/pfpghc2/201609/28/a77021386e764fc4828ea33ccd1ad864.jpg"> </div> </ion-slide> <ion-slide> <div class="box yellow"> <img src="https://ks.sinaimg.cn/n/news/20161003/j1TZ-fxwkzyh4142724.jpg/w640h320z1l50t1c70.jpg"> </div> </ion-slide> <ion-slide> <div class="box pink"> <img src="https://ks.sinaimg.cn/n/news/20161003/d-TL-fxwkzym7587820.jpg/w640h320z1l50t18b4.jpg"> </div> </ion-slide> </ion-slide-box> </ion-content> </ion-view> <script type="text/javascript"> var app = angular.module('app',['ionic']); app.controller('ctrl', function($scope,$ionicSlideBoxDelegate,$state) { //为了验证属性active-slide定义的模型，angularjs是mvc模式 $scope.model = { activeIndex:1 }; //此事件对应的是pager-click属性，当显示图片是有对应数量的小圆点，这是小圆点的点击事件 $scope.pageClick = function(index){ $scope.model.activeIndex = 2; }; //当图片切换后，触发此事件 $scope.slideHasChanged = function($index){ }; //这是属性delegate-handle的验证使用的，其实没必要重定义，直接使用$ionicSlideBoxDelegate就可以 $scope.delegateHandle = $ionicSlideBoxDelegate; }) </script></body></html>

以上这篇使用ionic播放轮询广告的实现方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章