使用ionic播放輪詢廣告的實現(xiàn)方法(必看)
更新時間：2017年04月24日 08:32:17 投稿：jingxian
下面小編就為大家?guī)硪黄褂胕onic播放輪詢廣告的實現(xiàn)方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用ionic中的ion-slide-box實現(xiàn)，下面是完整的代碼示例：
<!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
};
//此事件對應(yīng)的是pager-click屬性，當顯示圖片是有對應(yīng)數(shù)量的小圓點，這是小圓點的點擊事件
$scope.pageClick = function(index){
$scope.model.activeIndex = 2;
};
//當圖片切換后，觸發(fā)此事件
$scope.slideHasChanged = function($index){
};
//這是屬性delegate-handle的驗證使用的，其實沒必要重定義，直接使用$ionicSlideBoxDelegate就可以
$scope.delegateHandle = $ionicSlideBoxDelegate;
})
</script>
</body>
</html>
以上這篇使用ionic播放輪詢廣告的實現(xiàn)方法(必看)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在我們創(chuàng)建一個angularJS應(yīng)用的時候，菜單往往往是不可或缺的元素之一。接下來通過本文給大家介紹AngularJS動態(tài)菜單操作指令，感興趣的朋友一起學(xué)習吧2017-04-04
本文通過對比幾種Angular組件間的通信方式,給大家介紹了一種新的Angular組件間通信的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
本文給大家介紹angularjs驗證重復(fù)密碼的兩種方法，每種方法都有各自的優(yōu)缺點，大家可以根據(jù)需要選擇一種方法，具體內(nèi)容詳情大家通過本文詳細了解下吧2016-11-11
Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。這篇文章主要介紹了Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié),需要的朋友可以參考下2018-09-09
angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例
下面小編就為大家分享一篇angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了淺談angular.copy() 深拷貝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了AngularJS實現(xiàn)表單驗證，客戶端表單驗證是AngularJS里面最酷的功能之一。AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應(yīng)的現(xiàn)代HTML5表單，對AngularJS表單驗證感興趣的小伙伴們可以參考一下2015-12-12
Angular6實現(xiàn)拖拽功能指令drag實例詳解
這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
體驗jQuery和AngularJS的不同點及AngularJS的迷人之處
AngualrJS是一個很貼心的web應(yīng)用框架，本篇通過jQuery和Angular兩種方式來實現(xiàn)同一個實例，從而體驗兩者的不同點以及AngularJS的迷人之處2016-02-02
這篇文章主要介紹了angular 實現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-03-03