使用ionic播放轮询广告的实现方法(必看)

使用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="external nofollow" 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播放轮询广告的实现方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用ionic播放轮询广告的实现方法(必看)

    使用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="externa

  • Android编程实现ListView头部ViewPager广告轮询图效果

    本文实例讲述了Android编程实现ListView头部ViewPager广告轮询图效果.分享给大家供大家参考,具体如下: 之前看了别人的一些软件,发现其广告图轮询的时候,那个广告感觉和ViewPager的效果不太一样,后来也查了一下,是因为时间问题,找了一些资料,自己也实践一下. 1.为了解决ListView头部加ViewPager滑动冲突问题,必须自定义ListView,重写里面的onInterceptTouchEvent方法,ListView代码如下: package com.exampl

  • JS SetInterval 代码实现页面轮询

    JS SetInterval 代码实现页面轮询

    概念介绍 setInterval 是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval 被调用或窗口被关闭. 由 setInterval 返回的ID值可用作 clearInterval 方法的参数. 提示: 1000 毫秒= 1 秒. flash用法(来自百度百科) setInterval 动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时

  • jquery与php结合实现AJAX长轮询(LongPoll)

    jquery与php结合实现AJAX长轮询(LongPoll)

    HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到" 服务器推送技术(Comet)". 传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据.种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客服端会对服务器在短时间内发送出多个请求. 反转AJAX,就是所谓的长轮询或者COMET.服务器与客服端需要保持一条长时间的请求,它使

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • .Net MVC实现长轮询

    什么是长轮询? 长轮询是"服务器推"技术实现方式的一种,可以将服务端发生的变化实时传送到客户端而无须客户端频繁的地刷新.发送请求. 长轮询原理? 客户端向服务器发送Ajax请求,服务器接收到请求后,保持连接不返回消息,直到进行相关处理完毕后才返回响应信息并关闭连接,客户端接收到响应信息后,进行相关处理,处理完毕后再想服务器发送新的请求. 长轮询的应用场景? 长轮询常应用于Web及时通讯.监控.即时报价系统等需要实时将服务端的变化发送到客户端的场景. 长轮询的优缺点? 优点:无消息时不会

  • JQuery实现简单的服务器轮询效果实例

    本文实例讲述了JQuery实现简单的服务器轮询效果.分享给大家供大家参考,具体如下: 很多论坛都有进入后,弹出提示,说有多少封邮件没有看,或者是一个oa系统,进入后,提示有多少个任务没有做.每隔一段时间会提示一次,但是如何实现呢.其实,利用jquery的话,会比较简单,核心元素就是json格式解析和setInterval()函数.下面一起来实现: 首先,我们default.aspx的页面如下所示: <%@ Page Language="C#" AutoEventWireup=&q

  • Thinkphp结合AJAX长轮询实现PC与APP推送详解

    前言 本文主要给大家介绍的关于Thinkphp结合AJAX长轮询实现PC与APP推送的相关内容,分享出来供大家参考学习,话不多说,来一起看看详细的介绍. 实现逻辑 某个操作(比如新建一条公告)后,触发同时推送消息给APP或是移动WEB的所有用户或指定用户. 不论性能,总还是有人会用到吧,实现如下(基于Thinkphp5消息推送): PHP长轮询 /* * long轮询 API查询接口 */ public function id_log() { if (request()->isPost()) {

  • JS实现websocket长轮询实时消息提示的效果

    JS实现websocket长轮询实时消息提示的效果

    效果图如下: 参考代码如下: jsp代码: <%@ page contentType="text/html;charset=UTF-8" language="java"%> <div class="page-header navbar navbar-fixed-top"> <div class="page-header-inner"> <div class="page-log

  • Node.JS中事件轮询(Event Loop)的解析

    Node.JS中事件轮询(Event Loop)的解析

    当我们知道I/O操作和创建新线程的开销是巨大的! 网站延迟的开销 对于一个网站,后台大多不需要进行复杂的计算,我们的程序大多时间花费在I/O读取上. 看到一个数据:IO操作可以比数据处理慢几个数量级.高端SSD固态硬盘的读取速度可以达到200mb-700mb/s;读取1000字节需要1.4微秒.而在此期间,2GHZ频率的CPU可以执行28000个指令处理周期.而网络数据的IO甚至更慢! NodeJS采用单线程非阻塞的架构解决老大难的IO问题 当采用多线程时,为每一个请求开启一个新的线程(Apac

随机推荐