html This part is not much to say, we all write, I posted the code directly below, not much to explain.
1 |
<!DOCTYPE html> |
CSS
CSS I suppose I spent a long time piece, it may be because there is no reason for too long struck the CSS.
Code have my notes, I have do not understand can directly see the notes.
1 |
{* |
JavaScript DOM
Carousel Figure here, DOM is the most important part, which is the core of an implementation of the carousel.
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
var container = document.getElementById("container");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var list = document.getElementById("list");
var buttons = document.getElementsByTagName("span");
var index = 1;
var animated = false;
//做一个优化
var timer;
function showButton() {
if (index == 6)
//如果不判断，index会一直加。
index = 1;
else if (index == 0)
index = 5;
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className === 'on')
buttons[i].className = '';
}
buttons[index - 1].className = 'on';
};
function animate(offset) {
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 500;
//动画总时间;
var interval = 10;
//位移间隔时间;
var speed = offset / (time / interval);
//每次移动量;
function go() {
if (speed < 0 && parseInt(list.style.left) > newLeft || (speed > 0 && parseInt(list.style.left) < newLeft)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, interval);
//再次调用，看是否满足条件；递归；实现动画效果
} else {
animated = false;
list.style.left = newLeft + 'px';
//更新坐标
if (newLeft > -467)
list.style.left = -467 * 5 + 'px';
//无限滚动，如果我们的Left值大于第一张图的值时，即需要转换到最后一张图。
if (newLeft < -467 * 5)
list.style.left = -467 + 'px';
//与上面一样，实现的是最后一张到第一张的的转变
}
}
go();
}
next.onclick = function() {
index += 1;
showButton();
if (!animated) {
animate(-467);
}
};
//
prev.onclick = function() {
index -= 1;
showButton();
if (!animated) {
animate(467);
}
};
for (var i = 0; i < buttons.length; i++) {
buttons[i].onmouseover = function() {
if (this.className == 'on')
return;
//优化处理，当鼠标移动到同一个元素上，不会执行函数；
var myIndex = parseInt(this.getAttribute('index'));
var offset = (-467 * (myIndex - index));
index = myIndex;
showButton();
if (!animated) {
animate(offset);
}
}
};
function change() {
timer = setInterval(function() {
next.onclick();
}, 3000);
};
//可以一直执行；
STOP function () {
the clearInterval (Timer);
};
// Clear the automatic scroll
container.onmouseover = stop;
when the // mouse into the picture, stop playing
container.onmouseout = change;
when the mouse is not // pictures, automatically play
change();
}
to sum up
- By writing a carousel view of such a small demo will let me just learned together, for their project to lay a foundation of the future.
Learning Videos
Mu class Network: Focus Carousel drawing special effects , very grateful to the lecturers. He gave me a lot of help. The teacher is relatively clear.