Angularjsによるスライド効果
1479 ワード
前言
Jqueryは現在まで発展しており、スライドコンポーネントは非常に成熟しているので、Angularjsを利用してスライド効果を実現する手順を見てみましょう.
npm方式取付
使用方法
第一歩(導入)
ステップ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(ラベルを挿入)
まとめ
以上がこの文章のすべての内容で、この文章がみんなに役に立つことを望んで、もし疑問があればみんなは伝言を残して交流することができます.
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:"#"}];
});
まとめ
以上がこの文章のすべての内容で、この文章がみんなに役に立つことを望んで、もし疑問があればみんなは伝言を残して交流することができます.