使用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. RabbitMQ (十六) 消息队列的应用场景 (转)

    原贴 : http://blog.csdn.net/cws1214/article/details/52922267 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题 ...

  2. [bzoj3625][Codeforces 250 E]The Child and Binary Tree（生成函数＋多项式运算＋FFT）

    3625: [Codeforces Round #250]小朋友和二叉树 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 650  Solved: 28 ...

  3. codeforces VK Cup 2015 - Qualification Round 1 B. Photo to Remember 水题

    B. Photo to Remember Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/522/ ...

  4. Google Code Jam Africa 2010 Qualification Round Problem A. Store Credit

    Google Code Jam Qualification Round Africa 2010 Problem A. Store Credit https://code.google.com/code ...

  5. Qt on android 蓝牙开发(控制小车)

    因为要做一个用蓝牙控制小车的app,就用着QT搞了下,网上关于QT蓝牙开发的资料比较少,我在这里记录下过程希望对看到了人有所帮助 首先在项目文件里添加 QT += bluetooth 这样就可以用QT ...

  6. 关闭Spring Boot的Jsckson的FAIL_ON_EMPTY_BEANS

    说明:Spring Boot中默认使用了Jackson做JSON的解析. 解决方法: 1.通过注入Bean来实现 错误: org.springframework.http.converter.Http ...

  7. 反激 (Flyback) 控制器 -- LTC3803

    LTC3803 - 采用 ThinSOT 封装的恒定频率.电流模式.反激式 DC/DC 控制器 特点 VIN 和 VOUT 仅受限于外部元件 可调斜率补偿 内部软起动 200kHz 恒定频率操作 ±1 ...

  8. 狗日的rem

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  9. 一步一步学习Vim 全图解释

    转载:http://linux.chinaunix.net/techdoc/desktop/2009/01/03/1056322.shtml 一步一步学习Vim 全图解释 以下注释,根据图示和自己实践 ...

  10. 利用AS3的ByteArray解析SWF的尺寸

    AS3的ByteArray可以用来操作二进制.使用它,我们就获取加载进来的SWF的尺寸. 首先要了解下SWF的文件结构,可以下载官方的PDF看下. 用UltraEdit32打开一个SWF,会看到第一个 ...