第一次写博客，写了一个简单的轮播图效果，用的是回调函数，主要有上一张、下一张、小圆点跳转、定时滚动的效果，body背景颜色随着滚动随机变化，虽然麻烦了一点，但是简单易懂，适合初学者。
1 <body>
2 <div id="p">
3 <p class="bottom"><img src="img/1__03.jpg">当前在第一张</p>
4 <p><img src="img/1__11.jpg">当前在第二张</p>
5 <p><img src="img/1__07.jpg">当前在第三张</p>
6 <p><img src="img/1__09.jpg">当前在第四张</p>
7 </div>
8 <div id="bigbox">
9 <div id="left">
10 <img src="img/left.png" >
11 </div>
12 <div id="box">
13 <img src="img/1__03.jpg" id="img">
14 </div>
15 <div id="right">
16 <img src="img/right.png" >
17 </div>
18 </div>
19 <div id="link">
20 <a href="img/1__03.jpg" class="red"></a>
21 <a href="img/1__11.jpg"></a>
22 <a href="img/1__07.jpg"></a>
23 <a href="img/1__09.jpg"></a>
24 </div>
25 <img src="img/71_4.jpg" id="mouseimg">
26 </body>
<style type="text/css">
* {margin: 0;padding: 0;}
body {display: flex;flex-direction: column;align-items: center;}
#bigbox {display: flex;margin-top:100px;}
#box {width: 383px;height: 383px;}
#left,#right {padding-top: 150px;}
#link {margin-top: 20px;}
a {display: inline-block;width: 30px;height: 30px;border-radius: 50%;box-shadow: 2px 2px 1px #A9A9A9,-2px -1px 1px #EEEEEE;
margin-right: 5px;}
#p {margin-top: 50px;display: flex;}
#p p{text-align: center;display: flex;flex-direction: column;margin: 10px;height: 110px;}
#p p img {margin: auto;width: 80px;height: 80px;}
.bottom {border-bottom: 5px solid red;}
.red {background-color: red;}
#mouseimg {width: 60px;height: 60px;position: absolute;}
</style>
1 var left=my$("left");
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 //遍历a标签所在的links集合
24 for(var i=0;i<links.length;i++){
25 // 取到每一个小圆点(a标签)
26 var link=links[i];
27 //点击事件
28 link.onclick=function(){
29 // 将当前正在被点击的a的href赋值给img标签
30 // this:事件源,指被点击的a
31 oimg.src=this.href;
32 //调用函数,改变背景色
33 getRadomclass();
34 //调用函数,获取当前显示的a标签的数组下标
35 getNindex();
36 var index=getNindex();
37 //调用函数,且实参为当前img标签下标值
38 Nindex(index);
39 //取消a标签的默认跳转行为
40 return false;
41 }
42 }
43
44 //上一张
45 left.onclick=function(){
46 //调用函数,改变背景色
47 getRadomclass();
48 //调用函数,获取当前显示的a标签的数组下标
49 getNindex();
50 var index=getNindex();
51 // 判断:
52 // 如果当前下标为0,则跳转到最后一张,即下标为arr.length-1
53 // 如果不为0,则跳转到上一张,即下标为index-1;
54 if(index==0){
55 img.src=arr[arr.length-1]
56 index=arr.length-1;
57 }else{
58 img.src=arr[index-1];
59 index--;
60 }
61 //调用函数,且实参为当前img标签下标值
62 Nindex(index);
63 }
64
65 //下一张
66 right.onclick=function(){
67 //调用函数,改变背景色
68 getRadomclass();
69 //调用函数,获取当前显示的a标签的数组下标
70 getNindex();
71 var index=getNindex();
72 // 判断:
73 // 如果当前下标为最后一张图片的下标,则跳转到第一张,即下标为index为0
74 // 如果不为最后一张,则跳转到下一张,即下标为index+1;
75 if(index==arr.length-1){
76 img.src=arr[0];
77 index=0;
78 }else{
79 img.src=arr[index+1];
80 index++;
81 }
82 //调用函数,且实参为当前img标签下标值
83 Nindex(index);
84 }
85
86 // function功能与下一张一致
87 // setInterval():每隔s毫秒执行一次,
88 // setTimeout():s毫秒后执行
89 // 格式:
90 // setInterval(function(){
91
92 // },)
93 // 定时器,每隔5秒切换一次
94 var timeid= setInterval(function(){
95 // clearInterval(timeid);
96 getRadomclass();
97 getNindex();
98 var index=getNindex();
99 if(index==arr.length-1){
100 img.src=arr[0];
101 index=0;
102 }else{
103 img.src=arr[index+1];
104 index++;
105 }
106 Nindex(index);
107 },3000)
108
109 attendant()
function my$(id){
return document.getElementById(id);
}
function randmon(max,min){
return Math.round(Math.random()*(max-min)+min);
}
//获取随机色
function getRadomclass(){
var r=Math.round(Math.random()*255);
var g=Math.round(Math.random()*255);
var b=Math.round(Math.random()*255);
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
//获取当前img下标
function getNindex(){
for(var i=0;i<arr.length;i++){
if(img.src==arr[i]){
return i;
}
}
}
// 修改p标签和a标签的class名
function Nindex(Nindex){
for(var i=0;i<links.length;i++){
links[i].setAttribute("class","");
simg[i].setAttribute("class","");
}
links[Nindex].setAttribute("class","red");
simg[Nindex].setAttribute("class","bottom");
}
function attendant(){
var mouseimg=document.getElementById('mouseimg')
document.onmousemove=function(e){
e=e || window.event;
mouseimg.style.left=e.pageX+20+'px';
mouseimg.style.top=e.pageY-30+'px';
}
}
