利用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"秒

第三步（插入標(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:"#"}];
  });

總結(jié)

以上就是這篇文章的全部內(nèi)容，希望這篇文章對大家能有所幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機制
這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù)，雙向綁定機制的相關(guān)資料,需要的朋友可以參考下
2016-12-12
Angular.js與Bootstrap相結(jié)合實現(xiàn)表格分頁代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識，在學(xué)習(xí)過程中寫了一個小demo，下面把代碼思路分享給大家，感興趣的朋友一起學(xué)習(xí)
2016-04-04
Angular5.1新功能分享
這篇文章主要介紹了Angular5.1新功能以及相關(guān)的用法，需要的朋友參考學(xué)習(xí)下吧。
2017-12-12
Angular使用Md5加密的解決方法
這篇文章主要介紹了Angular使用Md5加密的解決方法,需要的朋友可以參考下
2017-09-09
angular2 ng2 @input和@output理解及示例
本篇文章主要介紹了angular2 ng2 @input和@output理解及示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
簡介AngularJS中$http服務(wù)的用法
我們可以使用內(nèi)置的$http服務(wù)直接同外部進行通信。$http服務(wù)只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象。接下來通過本文給大家簡單介紹angularjs中http服務(wù)的用法，喜歡的朋友可以參考下
2016-02-02
AngularJS 指令的交互詳解及實例代碼
這篇文章主要介紹了AngularJS 指令的交互，這里整理了詳細的資料及實例代碼，有興趣的小伙伴可以參考下
2016-09-09
AngularJS基礎(chǔ) ng-copy 指令實例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下
2016-08-08
Angularjs實現(xiàn)頁面模板清除的方法
這篇文章主要介紹了Angularjs實現(xiàn)頁面模板清除的方法,需要的朋友可以參考下
2018-07-07
AngularJS中實現(xiàn)動畫效果的方法
本文主要介紹AngularJS 動畫,這里對動畫的資料詳細介紹并附有效果圖和代碼實例,有需要的小伙伴參考下
2016-07-07