Angularjs 實(shí)現(xiàn)一個(gè)幻燈片示例代碼
基于angularjs制作的幻燈片

npm方式安裝
npm install angularjsSlider
使用方法
第一步(引入)
require('angularjsSlider')(moduleName);//引入
第二步(參數(shù)配置)
| 類型 | 說明 | |
|---|---|---|
| data | Array | 幻燈片圖片數(shù)據(jù) [{img: "1.jpg",link:'#'}...] |
| timer | Number | 幻燈片切換間隔timer="2" |
| btn-left | String | 左側(cè)切換按鈕btn-left="#btnleft" |
| btn-right | String | 右側(cè)切換按鈕btn-right=".btnright" |
| animate-type | String | 切換動(dòng)畫方式animate-type="ease" |
| animate-time | String | 切換動(dòng)畫時(shí)間animate-time="1.0"秒 |
第三步(插入標(biāo)簽)
<slider></slider>//插入html標(biāo)簽
<div class="sliderBox" ng-controller="firstCtrl">
<slider timer="2" data="data" btn-left="#btnleft" btn-right=".btnright" animate-type="ease" animate-time="1.0">
</slider>
<div class="btn left" id="btnleft"></div>
<div class="btn right btnright"></div>
</div>
var myModule = angular.module('myApp',[]);
myModule.controller('firstCtrl', function($scope) {
$scope.data = [{img: "../img/1.jpg",link:"#"}];
});
以上就是對(duì)AngularJS 的實(shí)現(xiàn)幻燈片資料,后續(xù)繼續(xù)整理相關(guān)知識(shí),謝謝大家對(duì)本站的支持!
- JS實(shí)現(xiàn)的幻燈片切換顯示效果
- JS實(shí)現(xiàn)的多張圖片輪流播放幻燈片效果
- Javascript實(shí)現(xiàn)跑馬燈效果的簡(jiǎn)單實(shí)例
- 【JS+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼
- JavaScript實(shí)現(xiàn)跑馬燈抽獎(jiǎng)活動(dòng)實(shí)例代碼解析與優(yōu)化(二)
- javascript跑馬燈抽獎(jiǎng)實(shí)例講解
- javascript新聞跑馬燈實(shí)例代碼
- JS實(shí)現(xiàn)狀態(tài)欄跑馬燈文字效果代碼
- js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效代碼分享
- js實(shí)現(xiàn)交通燈效果
相關(guān)文章
Angular.js自定義指令學(xué)習(xí)筆記實(shí)例
這篇文章主要介紹了Angular.js自定義指令的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
Angularjs在初始化未完畢時(shí)出現(xiàn)閃爍問題的解決方法分析
這篇文章主要介紹了Angularjs在初始化未完畢時(shí)出現(xiàn)閃爍問題的解決方法,結(jié)合實(shí)例形式分析了3種常用的閃爍問題解決方法,需要的朋友可以參考下2016-08-08
AngularJS基礎(chǔ) ng-submit 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-submit 指令,這里對(duì)ng-submit 指令的基礎(chǔ)資料做了詳細(xì)介紹整理,并附有代碼示例,有需要的小伙伴可以參考下2016-08-08
AngularJS ng-repeat指令及Ajax的應(yīng)用實(shí)例分析
這篇文章主要介紹了AngularJS ng-repeat指令及Ajax的應(yīng)用,結(jié)合實(shí)例形式分析了ng-repeat指令的功能及ajax請(qǐng)求交互相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系,結(jié)合實(shí)例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關(guān)系,需要的朋友可以參考下2017-01-01
解析AngularJS中g(shù)et請(qǐng)求URL出現(xiàn)的跨域問題
本文主要介紹了AngularJS中g(shù)et請(qǐng)求URL出現(xiàn)跨域問題。需要的朋友可以參考下2016-12-12
angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法,分別介紹了$http.post和$http.get請(qǐng)求的方法,有興趣的可以了解一下2017-05-05

