AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。下面這篇文章我們來分享如何利用Angularjs實(shí)現(xiàn)幻燈片效果。

前言

Jquery發(fā)展至今,幻燈組件已經(jīng)非常成熟，所以下面小編帶大家一起看看利用Angularjs實(shí)現(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	切換動畫時(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:"#"}];
  });

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動表單)，詳細(xì)的介紹了這兩種表單的實(shí)現(xiàn)以及區(qū)別，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-12-12
使用Raygun來自動追蹤AngularJS中的異常
這篇文章主要介紹了使用Raygun來自動追蹤AngularJS中的異常,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下
2015-06-06
AngularJs $parse、$eval和$observe、$watch詳解
這篇文章主要介紹了AngularJs $parse、$eval和$observe、$watch的相關(guān)資料,需要的朋友可以參考下
2016-09-09
angular簡介和其特點(diǎn)介紹
這篇文章主要介紹了angular簡介和其特點(diǎn)介紹,本文講解了關(guān)于和jquery的比較、關(guān)于適用場合、關(guān)于UI的結(jié)合、關(guān)于angularjs的特點(diǎn)等內(nèi)容,需要的朋友可以參考下
2015-01-01
Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定的示例代碼
本篇文章主要介紹了Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
angularjs手動識別字符串中的換行符方法
今天小編就為大家分享一篇angularjs手動識別字符串中的換行符方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
AngularJS實(shí)現(xiàn)表單驗(yàn)證
客戶端表單驗(yàn)證是AngularJS里面最酷的功能之一。 AngularJS表單驗(yàn)證可以讓你從一開始就寫出一個(gè)具有交互性和可相應(yīng)的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗(yàn)證指令。在這里，我們將談?wù)剮讉€(gè)最流行指令，然后我們將討論如何編寫自定義的驗(yàn)證。
2015-01-01
Angular2 父子組件數(shù)據(jù)通信實(shí)例
這篇文章主要介紹了Angular2 父子組件數(shù)據(jù)通信實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
angularJS模態(tài)框$modal實(shí)例代碼
本篇文章主要介紹了angularJS模態(tài)框$modal實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
詳解Angular數(shù)據(jù)綁定及其實(shí)現(xiàn)方式
數(shù)據(jù)綁定是將應(yīng)用程序UI或用戶界面綁定到模型的機(jī)制。使用數(shù)據(jù)綁定，用戶將能夠使用瀏覽器來操縱網(wǎng)站上存在的元素。
2021-05-05