1、制作幻灯片显示（参考html实验8的第4题）
功能说明：
(1) 用setTimeout制作幻灯片动画。装载网页后自动播放幻灯片。具体见slider.mp4
(2) 当mouseover图片时，显示左右箭头，并停止动画。当mouseout画面时，隐藏左右箭头，重新启动动画。
(3) 每次点击左箭头将移动一副图像。
(4) 右下角的三个点每个点对应一幅图像，当前图像的变化时所对应的点也会变化。点击它们时会显示对应的图像。
编程参考：
(1) 图片采用三个img，并用div包含，样式white-space要加上nowrap。
(2) 外层再用一个div，设置宽度为一个图片的宽度，并设置overflow为hidden。
(3) 上面的两个div均为relative。
(4) 每个点和箭头采用div和背景图实现，三个点采用一个div封装，该div和两个箭头的div均采用绝对定位。
(5) 通过增加class或删除class实现三个点中活动点的切换。
* 所用方法: querySelector()，querySelectorAll()，classList.add()，classList.remove()
基本实现思路：
通过一个时间数值t，每过一定时间t会增加，到达刚好切换进一张完整图片的时候，用一个stay值让它停留片刻。
3个导航点，根据选择的哪张图片(choose函数)来决定哪个点应该使用红色，不过要注意点的图片资源是这样的：
导航栏在图片的某一个元素被mouseover事件触发时就出现，否则隐藏：
完整实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style>
#slideMain {
top:130px;
left:440px;
padding: 0;
height:300px;
width:440px;
overflow:hidden;
position:relative;
}
.slides {
position:absolute;
height:300px;
width:2000px;
}
.slide {
height:300px;
width:440px;
float: left;
}
.Point,.Arrow {
position:absolute;
}
#point1 {
top:410px;
left:825px;
height:12px;
width:12px;
overflow:hidden;
position:absolute;
}
#point2 {
top:410px;
left:840px;
height:12px;
width:12px;
overflow:hidden;
position:absolute;
}
#point3 {
top:410px;
left:855px;
height:12px;
width:12px;
overflow:hidden;
position:absolute;
}
#arrow1 {
top:260px;
left:480px;
height:80px;
width:30px;
overflow:hidden;
position:absolute;
}
#arrow2 {
top:260px;
left:840px;
height:80px;
width:30px;
overflow:hidden;
position:absolute;
}
#arrow21{
top:-80px;
}
</style>
</head>
<body>
<div id="slideMain">
<div id="h" class="slides">
<img id="img1" class="slide" src="images/img1.jpg">
<img id="img2" class="slide" src="images/img2.jpg">
<img id="img3" class="slide" src="images/img3.jpg">
<img id="img1" class="slide" src="images/img1.jpg">
</div>
</div>
<div id="point1">
<img id="point11" class="Point" src="images/navigator.png">
</div>
<div id="point2">
<img id="point21" class="Point" src="images/navigator.png">
</div>
<div id="point3">
<img id="point31" class="Point" src="images/navigator.png">
</div>
<div id="arrow1">
<img id="arrow11" class="Arrow" src="images/arrows-30.png">
</div>
<div id="arrow2">
<img id="arrow21" class="Arrow" src="images/arrows-30.png">
</div>
</body>
<script>
var t=0;
var id;
var stay=0;
var judge=1;
var p1 = document.getElementById("point11");
var p2 = document.getElementById("point21");
var p3 = document.getElementById("point31");
var a1 = document.getElementById("arrow11");
var a2 = document.getElementById("arrow21");
a1.style.visibility="hidden";//当鼠标放在图片上时箭头才出现
a2.style.visibility="hidden";
function choose(pos){ //展现的图片,这个函数维护点
if(pos==1){ //注意到这里的每一个点都是12*36的，最下面的那个点才是红色的
p1.style.top=-24+ "px"; //减去24，刚好展现红色点
p2.style.top=0+ "px";
p3.style.top=0+ "px";
}
else if(pos==2){
p1.style.top=0+ "px";
p2.style.top=-24+ "px";
p3.style.top=0+ "px";
}
else{
p1.style.top=0+ "px";
p2.style.top=0+ "px";
p3.style.top=-24+ "px";
}
}
function clock(){
if(t!=0&&t!=-440&&t!=-880&&t!=-1320){ //每张图宽440px
t=t-5;
}
else{
stay=stay+judge; //这张图片刚刚切换进来的时候停留一定的时间
}
if(stay==80){
t=t-5;
stay=0;
}
if(t==-1320){//计算满了，重新计数
t=0;
}
if(t==0||(t<-880&&t>=-1320)){
choose(1);
}
else if(t<-0&&t>=-440){
choose(2);
}
else{
choose(3);
}
var h = document.getElementById("h");
h.style.left = t+ "px";//图片切换时慢慢往左移动
id=setTimeout(clock,10); //每10ms执行一次
}
clock();
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var img3=document.getElementById("img3");
var hander = function (event) { //绑定图上所有元素
switch (event.type) {
case "mouseover": //在图上，箭头出现
judge=0;
document.getElementById("arrow11").style.visibility="visible";
document.getElementById("arrow21").style.visibility="visible";
break;
case "mouseout": //离开图，箭头隐藏
judge=1;
document.getElementById("arrow11").style.visibility="hidden";
document.getElementById("arrow21").style.visibility="hidden";
break;
}
};
a1.onclick=function (){ //对左箭头进行点击
t=t+440;
if(t>0){
t=-880;
}
if(t==0||(t<-880&&t>=-1320)){
choose(1);
}
else if(t<-0&&t>=-440){
choose(2);
}
else{
choose(3);
}
};
a2.onclick=function (){
t=t-440;
if(t<-1320){
t=0;
}
if(t==0||(t<-880&&t>=-1320)){
choose(1);
}
else if(t<-0&&t>=-440){
choose(2);
}
else{
choose(3);
}
};
p1.onclick=function (){ //点击第一个圆点选择第一张图片
t=0;choose(1); };
p2.onclick=function (){//点击第二个圆点选择第二张图片
t=-440;choose(2); };
p3.onclick=function (){//点击第三个圆点选择第三张图片
t=-880;choose(3); };
a1.onmouseover=hander;
a1.onmouseout=hander;
a2.onmouseover=hander;
a2.onmouseout=hander;
p1.onmouseover=hander;
p1.onmouseout=hander;
p2.onmouseover=hander;
p2.onmouseout=hander;
p3.onmouseover=hander;
p3.onmouseout=hander;
img1.onmouseover=hander;
img1.onmouseout=hander;
img2.onmouseover=hander;
img2.onmouseout=hander;
img3.onmouseover=hander;
img3.onmouseout=hander;
</script>
</html>