使用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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
javascript编写简易计算器
May 06 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
详谈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实现的css文件背景图片下载器代码
2014/11/11 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python支付宝支付示例详解
2019/08/22 Python
python实现高斯投影正反算方式
2020/01/17 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python如何查看安装了的模块
2020/06/23 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
基于Python实现粒子滤波效果
2020/12/01 Python
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
抗洪救灾标语
2014/10/08 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
车间统计员岗位职责
2015/04/14 职场文书