使用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的获取浏览器窗口大小的代码
Mar 28 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
javascript实现倒计时效果
Feb 17 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面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Python谱减法语音降噪实例
2019/12/18 Python
numpy实现RNN原理实现
2021/03/02 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
商务会议邀请函
2014/01/09 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
道德模范事迹材料
2014/12/20 职场文书
小班上学期个人总结
2015/02/12 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL