利用Angularjs實現(xiàn)幻燈片效果
更新時間：2016年09月07日 10:36:59 投稿：daisy
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴展、增強HTML功能,它專為構(gòu)建強大的WEB應(yīng)用而設(shè)計。下面這篇文章我們來分享如何利用Angularjs實現(xiàn)幻燈片效果。
前言
Jquery發(fā)展至今,幻燈組件已經(jīng)非常成熟，所以下面小編帶大家一起看看利用Angularjs實現(xiàn)幻燈片效果的步驟。
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"秒 |
第三步（插入標簽）
<slider></slider>//插入html標簽
<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:"#"}];
});
總結(jié)
以上就是這篇文章的全部內(nèi)容，希望這篇文章對大家能有所幫助，如果有疑問大家可以留言交流。
您可能感興趣的文章:
- Angularjs 實現(xiàn)一個幻燈片示例代碼
- AngularJS 實現(xiàn)JavaScript 動畫效果詳解
- 深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
- Angularjs實現(xiàn)mvvm式的選項卡示例代碼
- 利用AngularJs實現(xiàn)京東首頁輪播圖效果
- 詳解AngularJS中ng-src指令的使用
- AngularJS實現(xiàn)按鈕提示與點擊變色效果
- AngularJS 面試題集錦
- AngularJS $on、$emit和$broadcast的使用
- AngularJS實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實例
- AngularJS 所有版本下載地址
相關(guān)文章
深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機制
這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù)，雙向綁定機制的相關(guān)資料,需要的朋友可以參考下2016-12-12
Angular.js與Bootstrap相結(jié)合實現(xiàn)表格分頁代碼
最近一直在學習angularjs相關(guān)知識，在學習過程中寫了一個小demo，下面把代碼思路分享給大家，感興趣的朋友一起學習2016-04-04
這篇文章主要介紹了Angular5.1新功能以及相關(guān)的用法，需要的朋友參考學習下吧。2017-12-12
這篇文章主要介紹了Angular使用Md5加密的解決方法,需要的朋友可以參考下2017-09-09
angular2 ng2 @input和@output理解及示例
本篇文章主要介紹了angular2 ng2 @input和@output理解及示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
我們可以使用內(nèi)置的$http服務(wù)直接同外部進行通信。$http服務(wù)只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象。接下來通過本文給大家簡單介紹angularjs中http服務(wù)的用法，喜歡的朋友可以參考下2016-02-02
這篇文章主要介紹了AngularJS 指令的交互，這里整理了詳細的資料及實例代碼，有興趣的小伙伴可以參考下2016-09-09
AngularJS基礎(chǔ) ng-copy 指令實例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下2016-08-08
這篇文章主要介紹了Angularjs實現(xiàn)頁面模板清除的方法,需要的朋友可以參考下2018-07-07
本文主要介紹AngularJS 動畫,這里對動畫的資料詳細介紹并附有效果圖和代碼實例,有需要的小伙伴參考下2016-07-07