使用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播放轮询广告的方法的更多相关文章

  1. c#调用JAVA的Webservice处理XML数据及批量轮询的实现方法

    前段时间做一个调用外单位WEBSERVICE的项目,项目完成的功能其实很简单,就是我们单位有很多车友会员,我们想对他们提供车辆违章信息告之服务!我们这边交警部门给我们开放了WS的接口,我们就是想通过这 ...

  2. c#-轮询算法

    这两天做东西,业务上有个特殊的需求,在用户访问页面的时候,针对某一行代码进行控制,按照概率来进行显示,我做的是针对当前页面的曝光进行处理,曝光代码是第三方的,页面上只要有这段代码就算是执行了这段曝光代 ...

  3. [置顶] Android AlarmManager实现不间断轮询服务

    在消息的获取上是选择轮询还是推送得根据实际的业务需要来技术选型,例如对消息实时性比较高的需求,比如微博新通知或新闻等那就最好是用推送了.但如果只是一般的消息检测比如更新检查,可能是半个小时或一个小时一 ...

  4. Android AlarmManager实现不间断轮询服务

    在消息的获取上是选择 轮询还是推送得根据实际的业务需要来技术选型,例如对消息实时性比较高的需求,比如微博新通知或新闻等那就最好是用推送了.但如果只是一般的消息检测比如 更新检查,可能是半个小时或一个小 ...

  5. Android 轮询之 Service + AlarmManager+Thread （转）

    android中涉及到将服务器中数据变化信息通知用户一般有两种办法,推送和轮询. 消息推送是服务端主动发消息给客户端,因为第一时间知道数据发生变化的是服务器自己,所以推送的优势是实时性高.但服务器主动 ...

  6. 基于PHP实现一个简单的在线聊天功能（轮询ajax ）

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  7. 浅析libuv源码-node事件轮询解析(4)

    这篇应该能结,简图如下. 上一篇讲到了uv__work_submit方法,接着写了. void uv__work_submit(uv_loop_t* loop, struct uv__work* w, ...

  8. 基于springboot实现轮询线程自动执行任务

    本文使用: Timer:这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行,但不能在指定时 ...

  9. 【轮询】【ajax】【js】【spring boot】ajax超时请求：前端轮询处理超时请求解决方案 + spring boot服务设置接口超时时间的设置

    场景描述: ajax设置timeout在本机测试有效,但是在生产环境等外网环境无效的问题 1.ajax的timeout属性设置 前端请求超时事件[网络连接不稳定时候,就无效了] var data = ...

随机推荐

  1. 韩梦飞沙-屏幕录像专家 win10 含注册机

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 韩梦飞沙-屏幕录像专家 win10 含注册机 百度云盘下载地址:https://pan. ...

  2. CSS 笔记——阴影、圆角、旋转、光标

    7. 阴影.圆角.旋转.光标 (1)box-shadow 阴影 基本语法 text-shadow: h-shadow v-shadow blur color; box-shadow: h-shadow ...

  3. 【四边形不等式】HDU3506-Monkey Party

    [题目大意] 香蕉森林里一群猴子(n<=1000)围成一圈开会,会长给他们互相介绍,每个猴子需要时间a[i].每次只能介绍相邻的两只猴子x和y认识,同时x所有认识的猴子和y所有认识的猴子也就相互 ...

  4. Android UI框架基本概念

    Activity:基本的页面单元,Activity包含一个Window,window上可以绘制各种view View:最基本的UI组件,表示屏幕上的一个矩形区域: Window:表示顶层窗口,管理界面 ...

  5. bzoj 2733 Splay 启发式合并，名次树

    题意:给定一个带点权的无向图,有两种操作: 1.将两个连通分量合并. 2.查询某个连通分量里的第K大点. 题解: 用并查集维护连通关系,一开始建立n棵splay树,然后不断合并,查询. 处理技巧: 1 ...

  6. 简单DP+暴力 POJ 1050

    To the Max Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 45915   Accepted: 24282 Desc ...

  7. 为什么MyISAM会比Innodb的查询速度快

    INNODB在做SELECT的时候,要维护的东西比MYISAM引擎多很多: 1)数据块,INNODB要缓存,MYISAM只缓存索引块,  这中间还有换进换出的减少: 2)innodb寻址要映射到块,再 ...

  8. 什么是 Backbone.js

    Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...

  9. Segger Real Time Terminal RTT JLINK 客户端软件 GUI 版本

  10. (windows)一台电脑上安装两个Mysql服务

    原文:https://my.oschina.net/u/1472917/blog/410732 最近需要在一台电脑上安装两个Mysql服务,需求稍微有些奇怪,但确实很必要.本人原本为了本机测试Word ...