Angularjs 實現(xiàn)一個幻燈片示例代碼
基于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 | 切換動畫方式animate-type="ease" |
animate-time | String | 切換動畫時間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:"#"}]; });
以上就是對AngularJS 的實現(xiàn)幻燈片資料,后續(xù)繼續(xù)整理相關(guān)知識,謝謝大家對本站的支持!
相關(guān)文章
Angular.js自定義指令學(xué)習(xí)筆記實例
這篇文章主要介紹了Angular.js自定義指令的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02Angularjs在初始化未完畢時出現(xiàn)閃爍問題的解決方法分析
這篇文章主要介紹了Angularjs在初始化未完畢時出現(xiàn)閃爍問題的解決方法,結(jié)合實例形式分析了3種常用的閃爍問題解決方法,需要的朋友可以參考下2016-08-08AngularJS基礎(chǔ) ng-submit 指令簡單示例
本文主要介紹AngularJS ng-submit 指令,這里對ng-submit 指令的基礎(chǔ)資料做了詳細(xì)介紹整理,并附有代碼示例,有需要的小伙伴可以參考下2016-08-08AngularJS ng-repeat指令及Ajax的應(yīng)用實例分析
這篇文章主要介紹了AngularJS ng-repeat指令及Ajax的應(yīng)用,結(jié)合實例形式分析了ng-repeat指令的功能及ajax請求交互相關(guān)操作技巧,需要的朋友可以參考下2017-07-07AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系,結(jié)合實例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關(guān)系,需要的朋友可以參考下2017-01-01解析AngularJS中g(shù)et請求URL出現(xiàn)的跨域問題
本文主要介紹了AngularJS中g(shù)et請求URL出現(xiàn)跨域問題。需要的朋友可以參考下2016-12-12angularJS 發(fā)起$http.post和$http.get請求的實現(xiàn)方法
本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請求的實現(xiàn)方法,分別介紹了$http.post和$http.get請求的方法,有興趣的可以了解一下2017-05-05