快捷導(dǎo)航

利用Angularjs實(shí)現(xiàn)幻燈片效果

更新時(shí)間：2016年09月07日 10:36:59 投稿：daisy

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	切換動(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:"#"}];
  });

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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