首页 > 代码库 > 使用ionic播放轮询广告的方法

使用ionic播放轮询广告的方法

使用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="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播放轮询广告的方法