使用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. Hibernate 悲观锁（Pessimistic Locking）

    在日常开发中并发应该是比较常遇到的业务场景,Hibernate给我们提供了并发操作,接下来简单介绍一下Hibernate悲观控制. 悲观锁:用户其实并不需要花很多精力去担心锁定策略的问题,通常情况下, ...

  2. PHP简单利用 token 防止表单重复提交

    <?php /* * 隐藏一个可变的token,每次提交都需要和服务器校对 */ session_start(); function set_token() { $_SESSION['token ...

  3. 微信、小程序开发UI库--weui

    一.weui可以开发微信内网页.微信小程序,二者使用的UI库不一样 1. 微信内网页样式文件为 .css文件  链接地址:https://weui.io/         weui-js库:  weu ...

  4. 快速开发一个自己的微信小程序

    一．写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先看看小程序效果 (1)欢迎页 (2) ...

  5. Mysql字符串连接函数 CONCAT()与 CONCAT_WS()

    从数据库里取N个字段,然后组合到一起用“,”分割显示,起初想到用CONCAT()来处理,好是麻烦,没想到在手册里居然有提到 CONCAT_WS(),非常好用. CONCAT_WS(separator, ...

  6. 内核镜像zImage是如何生成的

    转载:内核镜像zImage是如何生成的 内核镜像zImage是如何生成的 前面两篇文章介绍了vmlinux 文件生成,这个文件必然是核心的linux内核,但是它是ELF格式的文件,其中包含了可执行的二 ...

  7. java多线程知识点汇总（二）多线程实例解析

    本实验主要考察多线程对单例模式的操作,和多线程对同一资源的读取,两个知识.实验涉及到三个类: 1)一个pojo类Student,包括set/get方法. 2)一个线程类,设置student的成员变量a ...

  8. springboot 选择启动某个配置文件

    选择启动某个配置文件 Spring Boot配置文件提供了隔离一部分应用程序配置的方法,并可使其仅在某指定环境可用.任何有@Component和@Configuration注解的Bean都用@prof ...

  9. ArcGIS Engine中空间参照(地理坐标)相关方法总结转

    ArcGIS Engine中空间参照(地理坐标)相关方法总结 来自:http://blog.csdn.net/u011170962/article/details/38776101 1.创建空间参考 ...

  10. Android ListView工作原理完全解析，带你从源码的角度彻底理解

    版权声明:本文出自郭霖的博客,转载必须注明出处.   目录(?)[+] Adapter的作用 RecycleBin机制 第一次Layout 第二次Layout 滑动加载更多数据   转载请注明出处:h ...