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


Posted in Javascript onApril 24, 2017

使用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播放轮询广告的实现方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 #Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 #Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 #Javascript
Javascript操作dom对象之select全面解析
Apr 24 #Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 #Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
基于JavaScript实现类名的添加与移除
Apr 23 #Javascript
You might like
php购物网站支付paypal使用方法
2010/11/28 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python实现一组典型数据格式转换
2018/12/15 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
伊琍体标语
2014/06/25 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
Win10 Anaconda安装python-pcl
2022/04/29 Servers
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL