1 var left=my$("left");
1 function my$(id){
2 return document.getElementById(id);
3 }
4 function randmon(max,min){
5 return Math.round(Math.random()*(max-min)+min);
6 }
7
8 //获取随机色
9 function getRadomclass(){
10 var r=Math.round(Math.random()*255);
11 var g=Math.round(Math.random()*255);
12 var b=Math.round(Math.random()*255);
13 document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
14 }
15
16
17 //获取当前img下标
18 function getNindex(){
19 for(var i=0;i<arr.length;i++){
20 if(img.src==arr[i]){
21 return i;
22 }
23 }
24 }
25
26 // 修改p标签和a标签的class名
27 function Nindex(Nindex){
28 for(var i=0;i<links.length;i++){
29 links[i].setAttribute("class","");
30 simg[i].setAttribute("class","");
31 }
32 links[Nindex].setAttribute("class","red");
33 simg[Nindex].setAttribute("class","bottom");
34 }
35
36
37 function attendant(){
38 var mouseimg=document.getElementById('mouseimg')
39 document.onmousemove=function(e){
40 e=e || window.event;
41 mouseimg.style.left=e.pageX+20+'px';
42 mouseimg.style.top=e.pageY-30+'px';
43 }
44 }
2 var right=my$("right");
3 var box=my$("box");
4 var oimg=my$("img");
5 var p=my$("p");
6 //获取a标签集合
7 var links=document.querySelectorAll("#link a");
8 //获取p标签集合
9 var simg=document.querySelectorAll("#p p");
10 // 定义空数组,用来存放a标签的href地址
11 var arr=[];
12
13 // 给body设置延时属性
14 document.body.style.transition='all 1s';
15
16 //将a标签的href地址放入数组
17 for(var i=0;i<links.length;i++){
18 arr[i]=links[i].href
19 }
20 // console.log(arr)
21
22
23 //小圆点事件
24 //遍历a标签所在的links集合
25 for(var i=0;i<links.length;i++){
26 // 取到每一个小圆点(a标签)
27 var link=links[i];
28 //点击事件
29 link.onclick=function(){
30 // 将当前正在被点击的a的href赋值给img标签
31 // this:事件源,指被点击的a
32 oimg.src=this.href;
33 //调用函数,改变背景色
34 getRadomclass();
35 //调用函数,获取当前显示的a标签的数组下标
36 getNindex();
37 var index=getNindex();
38 //调用函数,且实参为当前img标签下标值
39 Nindex(index);
40 //取消a标签的默认跳转行为
41 return false;
42 }
43 }
44
45
46 //上一张
47 left.onclick=function(){
48 //调用函数,改变背景色
49 getRadomclass();
50 //调用函数,获取当前显示的a标签的数组下标
51 getNindex();
52 var index=getNindex();
53 // 判断:
54 // 如果当前下标为0,则跳转到最后一张,即下标为arr.length-1
55 // 如果不为0,则跳转到上一张,即下标为index-1;
56 if(index==0){
57 img.src=arr[arr.length-1]
58 index=arr.length-1;
59 }else{
60 img.src=arr[index-1];
61 index--;
62 }
63 //调用函数,且实参为当前img标签下标值
64 Nindex(index);
65 }
66
67
68 //下一张
69 right.onclick=function(){
70 //调用函数,改变背景色
71 getRadomclass();
72 //调用函数,获取当前显示的a标签的数组下标
73 getNindex();
74 var index=getNindex();
75 // 判断:
76 // 如果当前下标为最后一张图片的下标,则跳转到第一张,即下标为index为0
77 // 如果不为最后一张,则跳转到下一张,即下标为index+1;
78 if(index==arr.length-1){
79 img.src=arr[0];
80 index=0;
81 }else{
82 img.src=arr[index+1];
83 index++;
84 }
85 //调用函数,且实参为当前img标签下标值
86 Nindex(index);
87 }
88
89
90 // function功能与下一张一致
91 // setInterval():每隔s毫秒执行一次,
92 // setTimeout():s毫秒后执行
93 // 格式:
94 // setInterval(function(){
95
96 // },)
97 // 定时器,每隔5秒切换一次
98 var timeid= setInterval(function(){
99 // clearInterval(timeid);
100 getRadomclass();
101 getNindex();
102 var index=getNindex();
103 if(index==arr.length-1){
104 img.src=arr[0];
105 index=0;
106 }else{
107 img.src=arr[index+1];
108 index++;
109 }
110 Nindex(index);
111 },3000)
112
113
114
115 attendant()