使用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方法操作radio使其默认选项是否
Sep 10 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
Vue中 axios delete请求参数操作
Aug 25 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
js+h5 canvas实现图片验证码
Oct 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
python方向键控制上下左右代码
2018/01/20 Python
python内置数据类型之列表操作
2018/11/12 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python实现计算器简易版
2020/12/17 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
个人委托书怎么写
2014/09/17 职场文书
交通事故协议书范文
2014/10/23 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
班主任培训研修日志
2015/11/13 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis