JS原生缓动幻灯片

最近写的一个原生JavaScript幻灯片,动效是由js控制。

HTML代码

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
<div class="slide-wrap">
<ul id="slide-item">
<li>
<p class="img"><img src=""></p>
<div>
<label></label>
<p></p>
</div>
</li>
<li>
<p class="img"><img src=""></p>
<div>
<label></label>
<p></p>
</div>
</li>
<li>
<p class="img"><img src=""></p>
<div>
<label></label>
<p></p>
</div>
</li>
</ul>
<a href="javascript:" class="arrow left"></a>
<a href="javascript:" class="arrow right"></a>
</div>

js代码

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
var arrowL = getClass('arrow left', 'a')[0];
var arrowR = getClass('arrow right', 'a')[0];
var c_obj = document.getElementById('slide-item');
var items = c_obj.getElementsByTagName('li');
var obj_w = c_obj.parentNode.offsetWidth;
var current = 0,
next,
prev,
curItem,
preItem,
nexItem;
//init
var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(f) { setTimeout(f, 30) }
items[0].className = 'current';
items[1].className = 'next';
var clickLeft = function() {
if (current < 0) {
current = items.length - 1;
}
prev = (current == 0) ? items.length - 1 : current - 1;
curItem = items[current];
preItem = items[prev];
preItem.className = 'prev';
preItem.style.left = -1200 + 'px';
var slide = function() {
var left = curItem.style.left;
left = left ? parseFloat(left) : 0;
var speed = parseFloat(obj_w - left) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
left = Math.min(left + speed, 1200);
curItem.style.left = left + 'px';
var prev_left = preItem.style.left;
prev_left = prev_left ? parseFloat(prev_left) : 0;
var p_speed = parseFloat(0 - prev_left) / 10;
p_speed = p_speed > 0 ? Math.ceil(p_speed) : Math.floor(p_speed);
prev_left = Math.min(prev_left + p_speed, 1200);
preItem.style.left = prev_left + 'px';
if (left < obj_w) {
animate(slide);
arrowL.onclick = function(){return;}
arrowR.onclick = function(){return;}
}
if (left >= obj_w) {
if (items.length > 2) {
for (var j = 0; j < items.length; j++) {
items[j].removeAttribute('class');
}
if (prev == 0) {
items[items.length - 1].className = 'prev';
} else {
items[prev - 1].className = 'prev';
}
}
curItem.className = 'next';
preItem.className = 'current';
curItem.removeAttribute('style');
preItem.removeAttribute('style');
arrowL.onclick = clickLeft;
arrowR.onclick = clickRight;
}
}
animate(slide);
current--;
}
var clickRight = function() {
if (current > items.length - 1) {
current = 0;
}
next = (current > items.length - 2) ? 0 : current + 1;
curItem = items[current];
nexItem = items[next];
nexItem.className = 'next';
nexItem.style.left = 1200 + 'px';
var slideR = function() {
var left = curItem.style.left;
left = left ? parseFloat(left) : 0;
var speed = parseFloat(obj_w + left) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
left = Math.max(left - speed, -1200);
curItem.style.left = left + 'px';
var next_left = nexItem.style.left;
next_left = next_left ? parseFloat(next_left) : 0;
var p_speed = parseFloat(0 - next_left) / 10;
p_speed = p_speed > 0 ? Math.ceil(p_speed) : Math.floor(p_speed);
next_left = Math.max(next_left + p_speed, 0);
nexItem.style.left = next_left + 'px';
if (left > -1200) {
animate(slideR);
arrowL.onclick = function(){return;}
arrowR.onclick = function(){return;}
}
if (left 2) {
for (var j = 0; j < items.length; j++) {
items[j].removeAttribute('class');
}
if (next > items.length-2) {
items[0].className = 'next';
} else {
items[next+1].className = 'next';
}
}
curItem.className = 'prev';
nexItem.className = 'current';
curItem.removeAttribute('style');
nexItem.removeAttribute('style');
arrowR.onclick = clickRight;
arrowL.onclick = clickLeft;
}
}
animate(slideR);
current++;
}
arrowL.onclick = clickLeft;
arrowR.onclick = clickRight;

css

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
.slide-wrap {
width: 1200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
position: relative;
background: #fff;
.arrow {
position: absolute;
z-index: 99;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 30px;
height: 60px;
cursor: pointer;
}
.left {
left: 0;
}
.right {
right: 0;
}
ul {
position: relative;
height: 200px;
}
li {
position: absolute;
top: 0;
left: 0;
z-index: -9;
height: 200px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
animation: all 0.3s ease;
-webkit-animation: all 0.3s ease;
&.current {
left: 0;
z-index: 80;
}
&.prev {
left: -1200px;
z-index: 86;
}
&.next {
left: 1200px;
z-index: 86;
}
div {
display: inline-block;
vertical-align: middle;
height: 200px;
width: 650px;
word-break: break-all;
}
}
.img {
display: inline-block;
vertical-align: middle;
width: 280px;
margin-right: 50px;
img {
display: block;
margin: auto;
max-width: 280px;
width: 100%;
height: auto;
}
}
}
写得好!朕重重有赏!