html这部分没有什么好说的，大家都会写，我直接把代码贴在下面，就不多解释了。
1 | <!DOCTYPE html> |
CSS
CSS算是我耗费时间比较长的一块，也可能是因为太长时间没有敲过CSS的原因。
代码里有我的备注，大家有不太懂的可以直接看备注。
1 | * { |
JavaScript DOM
轮播图这里，DOM是最重要的部分了，这是轮播图实现的核心。
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);
};
//可以一直执行；
function stop() {
clearInterval(timer);
};
//清除自动滚动
container.onmouseover = stop;
//鼠标放到图片上时，停止播放
container.onmouseout = change;
//鼠标不在图片上时，自动播放
change();
}
总结
- 通过写一个轮播图这样的小demo能让我将学到的只是串联起来，为自己以后做项目打下的基础。
学习视频
慕课网：焦点轮播图特效，很感谢这位讲师。给了我很大的帮助。老师讲的也比较清晰明了。