Angularjs 實(shí)現(xiàn)一個幻燈片示例代碼

更新時間：2016年09月08日 15:46:53 投稿：lqh

本文主要介紹Angularjs 寫一個幻燈片的知識，這里整理了詳細(xì)的資料，及實(shí)現(xiàn)代碼和實(shí)現(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 的實(shí)現(xiàn)幻燈片資料，后續(xù)繼續(xù)整理相關(guān)知識，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

Angular5集成eventbus的示例代碼
這篇文章主要介紹了Angular5集成eventbus的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
AngularJS自定義指令詳解（有分頁插件代碼）
本篇文章主要介紹了AngularJS自定義指令詳解（有分頁插件代碼），具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
詳解Angular Forms中自定義ngModel綁定值的方式
在Angular應(yīng)用中有兩種方式來實(shí)現(xiàn)表單綁定，但是對于一些特殊的表單控件沒法實(shí)現(xiàn)，這篇文章主要介紹了詳解Angular Forms中自定義ngModel綁定值的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。
2017-07-07
AngularJS ng-change 指令的詳解及簡單實(shí)例
本文主要介紹AngularJS ng-change 指令,這里對ng-change指令資料做了詳細(xì)介紹，并提供源碼和運(yùn)行結(jié)果，有需要的小伙伴參考下
2016-07-07
Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐
本篇文章主要介紹了Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐，具有一定的參考價值，有興趣的可以了解一下
2017-08-08
AngularJS的依賴注入實(shí)例分析(使用module和injector)
這篇文章主要介紹了AngularJS的依賴注入,結(jié)合實(shí)例形式分析了依賴注入的原理及使用module和injector實(shí)現(xiàn)依賴注入的步驟與操作技巧,需要的朋友可以參考下
2017-01-01
angular第三方包開發(fā)整理(小結(jié))
本篇文章主要介紹了angular第三方包開發(fā)整理(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Angular.js回顧ng-app和ng-model使用技巧
這篇文章主要回顧Angular.js中ng-app和ng-model使用技巧，感興趣的小伙伴們可以參考一下
2016-04-04
AngularJS內(nèi)置指令
這篇文章主要詳細(xì)介紹了AngularJS內(nèi)置指令的使用方法，非常詳細(xì)，常用的一些指令操作都做了總結(jié)，有需要的小伙伴參考下
2015-02-02