使用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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
js tab效果的实现代码
Dec 26 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
原生JS中应该禁止出现的写法
May 05 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
javascript定时器完整实例
2015/02/10 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
计算机网络专业求职信
2014/06/05 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
铣工实训报告
2014/11/05 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python