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