Angularjsによるスライド効果

1479 ワード

前言
Jqueryは現在まで発展しており、スライドコンポーネントは非常に成熟しているので、Angularjsを利用してスライド効果を実現する手順を見てみましょう.
npm方式取付


npm install angularjsSlider

使用方法
第一歩(導入)


require('angularjsSlider')(moduleName);//

ステップ2(パラメータ構成)
を選択します.
説明
data
Array
スライド画像データ[{img:“1.jpg”,link:'#'}...]
timer
Number
スライド切り替え間隔timer="2"
btn-left
String
左切替ボタンbtn-left="#btnleft"
btn-right
String
右側切替ボタンbtn-right=".btnright"
animate-type
String
アニメーションモードの切り替えanimate-type=「ease」
animate-time
String
アニメーションタイムanimate-time=1.0秒の切り替え
ステップ3(ラベルを挿入)


//  html


var myModule = angular.module('myApp',[]);
  myModule.controller('firstCtrl', function($scope) {
    $scope.data = [{img: "../img/1.jpg",link:"#"}];
  });

まとめ
以上がこの文章のすべての内容で、この文章がみんなに役に立つことを望んで、もし疑問があればみんなは伝言を残して交流することができます.

JQueryノート10:JQueryスタイル操作

jQuery Mobile学習五