使用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. Xml配置文件属性的说明

    Xml配置文件属性的说明: <bean id="TheAction" ⑴ class="net.xiaxin.spring.qs.UpperAction" ...

  2. 磁盘镜像分析工具Autopsy

    磁盘镜像分析工具Autopsy   Autopsy是Kali Linux预安装的一款磁盘镜像分析工具.该工具可以对磁盘镜像的卷和文件系统进行分析,支持Unix和Windows系统.Autopsy是一个 ...

  3. TCP 的那些事儿-1

    TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人有很多收获.关于TCP这个协议的细节,我还是推荐你去 ...

  4. 创建基于主-从视图的应用程序(Master-Detail Application)

    以Master-Detail Application创建的应用程序在iPad和iPhone上都能运行,虽然模板解决了大部分问题,但还是有一些Apple遗留问题需要解决.使用该模板创建项目时,需要将下拉 ...

  5. go语言学习框架

    根据框架学习 https://books.studygolang.com/gopl-zh/ 看电子书 http://shinley.com/index.html

  6. 【BZOJ 3958】 3958: [WF2011]Mummy Madness （二分+扫描线、线段树）

    3958: [WF2011]Mummy Madness Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 96  Solved: 41 Descripti ...

  7. QT学习笔记1：VS2015配置QT5.11

    由于工作关系,我又接触到了QT,在之前写过一篇博客是 在vs2017下配置openCV,当时用的是2015做的示范,现在就继续记录一下在VS2015下配置QT吧(VS2017配置是一样的) 第一部分: ...

  8. Varnish与Squid的对比

    Varnish与Squid的对比 说到Varnish,就不能不提Squid.Squid是一个高性能的代理缓存服务器,它和Varnish相比较有诸多的异同点,下面进行分析. 下面是Varnish与Squ ...

  9. hdu 3572 资源分配

    资源分配,每个时间点有m个机器可用,要将这资源分配给n个任务中的一些,要求每个任务在自己的时间范围中被分配了p[i]个资源,建图: 建立源,与每个时间点连边,容量为m,每个任务向其对应的时间段中的每个 ...

  10. combotree的总结(这个好)

    1:最近有这个需求,就是ext下的combo下拉是树,网上的例子很多,封装的也很好,基本都可以满足下拉框下出现想要的树,但是我的使用情况是比如在用户编辑的时候,要把用户已经选择过的数值自动再赋值到下拉 ...