使用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. 用于解析通过JS的escape函数加密过的数据

    function js_unescape($str) { $ret = ''; $len = strlen($str); for ($i = 0; $i < $len; $i++) { if ( ...

  2. 应用程序首选项(application preference)及数据存储

    应用程序首选项(application preference)用来存储用户设置,考虑以下案例: a. 假设有一款MP3播放器程序,当用户调节了音量,当下次运行该程序时,可能希望保持上一次调节的音量值. ...

  3. [BZOJ4554][TJOI2016&&HEOI2016]游戏(匈牙利)

    4554: [Tjoi2016&Heoi2016]游戏 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 857  Solved: 506[Sub ...

  4. 【DFS】BZOJ3522-[Poi2014]Hotel

    [题目大意] 给出一棵树,求三个节点使得它们两两之间的距离相等,问共有多少种可能性? [思路] 显然,这三个节点是关于一个中心点对称地辐射出去的. 枚举中心点,往它的各个子树跑Dfs.tmp[i]表示 ...

  5. WordPress插件会员简化1.58 -任意文件下载漏洞（附poc）

    今天我们将讨论在WordPress插件WordPress插件与重点会员简化v1.58作为这个剧本的创作时间不打补丁的扶贫开发实践.脆弱脚本如下: CVE-ID:cve-2017-1002008 当然, ...

  6. Ubuntu14.04 安装中文输入法

    1 安装fcitx   sudo  apt-get install fcitx-table-py    这里py是拼音的意思,安装关依赖库和框架都会自动安装  2 把Ubuntu的系统环境改成中文  ...

  7. 74.Interesting Sequence(有趣的数列)（拓扑排序）

    Interesting Sequence(有趣的数列)[Special judge] 题目概述:是否存在一个长度为n的整数数列,其任意连续p项之和为正数而任意连续q项之和为负数? 方法:连续项a[i] ...

  8. JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)

    上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...

  9. TSearch & TFileSearch Version 2.2 -Boyer-Moore-Horspool search algorithm

    unit Searches; (*-----------------------------------------------------------------------------* | Co ...

  10. Spring使用@Required注解依赖检查

    Spring依赖检查 bean 配置文件用于确定的特定类型(基本,集合或对象)的所有属性被设置.在大多数情况下,你只需要确保特定属性已经设置但不是所有属性.. 对于这种情况,你需要 @Required ...