使用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 相关文章推荐
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
js删除对象中的某一个字段的方法实现
Jan 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常用Stream函数集介绍
2013/06/24 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
jquery中的过滤操作详细解析
2013/12/02 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python实现感知器算法详解
2017/12/19 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
总经理工作职责范文
2014/03/14 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
委托书怎样写
2014/08/30 职场文书
裁员通知
2015/04/25 职场文书
员工福利申请报告
2015/05/15 职场文书
秋季运动会加油词
2015/07/18 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Python实战之实现康威生命游戏
2021/04/26 Python
快速学习Oracle触发器和游标
2021/06/30 Oracle
nginx结合openssl实现https的方法
2021/07/25 Servers
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis