其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好。
那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换。在这里面就是在指令里操作dom元素,超级easy。
示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!DOCTYPE html>
<
html
lang
=
"en"
ng-app
=
"lunbo"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
script
src
=
"lib/angular.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"lib/angular-animate.js"
type
=
"text/javascript"
></
script
>
<
title
></
title
>
<
style
>
.hidden{
display: none;
}
.active{
display: block;
}
</
style
>
</
head
>
<
body
ng-controller
=
"lunboController"
>
<
div
lunbo ></
div
>
<
script
type
=
"text/ng-template"
id
=
"lunbo.html"
>
<
ul
>
<
li
ng-repeat
=
"img in images"
class
=
"fade-in style hidden"
>
<
a
href
=
"{
{img.href}}"
><
img
src
=
"{
{img.src}}"
alt
=
""
/></
a
></
li
>
</
ul
>
</
script
>
</
body
>
<
script
>
var app=angular.module('lunbo',['ngAnimate']);
app.controller('lunboController',['$scope','readJSON', function ($scope,readJSON) {
}]);
app.factory('readJSON',['$http','$q', function ($http,$q) {
return {
query: function () {
var deferred=$q.defer();
$http({
method:'GET',
url:'img.json'
}).success(function (data, status, header, config) {
deferred.resolve(data);
}).error(function (data, status, header, config) {
deferred.reject(data);
});
return deferred.promise;
}
}
|