轮播图介绍
轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小，但本文中谈及的轮播图具有以下特性：
它显示在首页的顶部，并占据不用滚动即可显示的页面上相当可观的面积。
同一个地方会展示多页内容，虽然一次只展现一个页面；每页中包含图片以及小段文字。
会有指示器表明，这个轮播图中不止一张图片。
轮播图也有着自己的优缺点：
优点
1.轮播图使得主屏上最重要的位置可以展示多页内容。
2. 页面顶部显示了更多的信息，用户有更大的可能性看到它们。
缺点：
1. 用户经常性地忽视轮播图，连带着里面所有的内容（就算自动滚动也无济于事噢～）——用户压根就不会长时间注意页面的顶部。所以，你不能指望他们能看完轮播图里所有内容。
2. 设计师常常认为轮播图是一组图片，但用户却只会在意他们看到的那一张图片。轮播图中的一组图片，也许能够精准地展现你的产品和服务，但如果用户只看到一组图片中的一张，他也许就会误解你的产品。
1.实现过程：
1.1界面图：
1.2功能介绍
界面顶部的四张小图片用来表示当前显示的图片是第几张，并且底部会有横线；
向左的图标点击后可以跳转到上一张，如果当前为第一张，则跳转到最后一张；
向右的图标点击后可以跳转到下一张，如果当前为最后一张，则跳转到第一张；
中间的大图为正在显示的照片
下面四个小圆点，点击后中间就会显示对应的照片，并且圆点会变成红色；
不进行人为干涉下，每隔一段时间，自动跳转到下一张
整个背景界面，在每一次跳转发生时，都会发生背景颜色的切换，同时在没有进行人为操作时，每隔一段时间背景色也会发生改变，且是随机变化，。
1.3布局准备：
1、界面的顶部，放了四个p标签，里面包含了一张图片分别对应当前界面正在显示的照片，以及span标签，标注当前页面显示的照片是第几张。
2、中间有一个bigbox的大盒子，里面包含了上一张功能的div(left)、显示图片的div(box)、下一张功能div(right)三个标签。
3、界面底部有4个小圆点(a标签)，点击不同的圆点即可显示对应的图片。
1.4代码讲解
首先，先写好html布局，如下：
<body>
<div id="p"> // 此处给第一个p标签设置class，并且在css中设置样式，用于对应标签在页面打开时的初始状态
<p class="bottom"><img src="img/1__03.jpg">当前在第一张</p>
<p><img src="img/1__11.jpg">当前在第二张</p>
<p><img src="img/1__07.jpg">当前在第三张</p>
<p><img src="img/1__09.jpg">当前在第四张</p>
</div>
<div id="bigbox">
<div id="left">
<img src="img/left.png" >
</div>
<div id="box">
<img src="img/1__03.jpg" id="img">
</div>
<div id="right">
<img src="img/right.png" >
</div>
</div>
<div id="link"> //此处设置同上方的p标签
<a href="img/1__03.jpg" class="red"></a>
<a href="img/1__11.jpg"></a>
<a href="img/1__07.jpg"></a>
<a href="img/1__09.jpg"></a>
</div>
<img src="img/71_4.jpg" id="mouseimg">
</body>`
css布局样式，凭个人喜好，不在此处站式，仅展示需用到的：
.bottom {border-bottom: 5px solid red;}
.red {background-color: red;}
js代码
在js代码中，首先要考虑程序的几个功能的实现
1、点击小圆点的时候，要显示对应的照片，这时候就要让中间的img标签的src值为a对应a标签的href值，但是，a标签的链接地址会在网页中被解析，如果事先就以将地址放入一个数组中，然后去对应索引位的值赋值给img标签时，后面再用的时候，已写好的对应的a标签href就会和对应的img标签src不相等，所以我们要将a标签的地址直接存放入一个空数组中，这样数组中的地址就会和a标签经过解析后的地址相等
2、在实现上一张、下一张以及对应p标签下边框、a标签背景色变化的时候，我们首先都需要获取到当前显示的图片在数组中的索引，拿到p标签和a标签所在的集合中，否则，小圆点和上一张、下一张的点击事件就不会联系，即就算点击第三个小圆点显示第三张照片后，点击下一张，显示的会是第二张，而非第四章，在这里，我将这些功能事件放到一个函数中，调用执行
3、每当索引发生变化时，背景色就会随机变为一种颜色，这里我将背景色的随机事件也写在一个函数中，并且在每一个点击事件中调用
4、具体代码如下：
封装的函数：
function my$(id){
return document.getElementById(id);
}
//获取随机色
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++){
//判断当前img的src和a标签href相等，即可取到对应a标签的下标，取出下标并return出去，在外部定义返回值为index，作为实参赋值给下面的函数Nindex()
if(img.src==arr[i]){
return i;
}
}
}
// 得到函数getNindex返回的下标值，遍历集合，修改对应p标签和a标签的class名
function Nindex(Nindex){
for(var i=0;i<links.length;i++){
//首先要清空p标签和a标签所有的class设置
links[i].setAttribute("class","");
simg[i].setAttribute("class","");
}
//给对应的p标签和a标签设置class属性，由于css中写好了样式，所以会直接体现出来
links[Nindex].setAttribute("class","red");
simg[Nindex].setAttribute("class","bottom");
}
代码：
var left=my$("left");
var right=my$("right");
var box=my$("box");
var oimg=my$("img");
var p=my$("p");
//获取a标签集合
var links=document.querySelectorAll("#link a");
//获取p标签集合
var simg=document.querySelectorAll("#p p");
// 定义空数组,用来存放a标签的href地址
var arr=[];
// 给body设置延时属性
document.body.style.transition='all 1s';
//将a标签的href地址放入数组
for(var i=0;i<links.length;i++){
arr[i]=links[i].href
}
//小圆点事件
//遍历a标签所在的links集合
for(var i=0;i<links.length;i++){
// 取到每一个小圆点(a标签)
var link=links[i];
//点击事件
link.onclick=function(){
// 将当前正在被点击的a的href赋值给img标签
//由于程序一加载完成，for循环就已经执行完成，i变为最大值，所以此处不能直接写links[i]，而是使用this
// this:事件源,指当前被点击的a
oimg.src=this.href;
//调用函数,改变背景色
getRadomclass();
//调用函数,获取当前显示的a标签的数组下标
getNindex();
var index=getNindex();
//调用函数,且实参为当前img标签下标值
Nindex(index);
//取消a标签的默认跳转行为
return false;
}
}
//上一张
left.onclick=function(){
//调用函数,改变背景色
getRadomclass();
//调用函数,获取当前显示的a标签的数组下标
getNindex();
var index=getNindex();
// 判断:
// 如果当前下标为0,则跳转到最后一张,即下标为arr.length-1
// 如果不为0,则跳转到上一张,即下标为index-1;
if(index==0){
img.src=arr[arr.length-1]
index=arr.length-1;
}else{
img.src=arr[index-1];
index--;
}
//调用函数,且实参为当前img标签下标值
Nindex(index);
}
//下一张
right.onclick=function(){
//调用函数,改变背景色
getRadomclass();
//调用函数,获取当前显示的a标签的数组下标
getNindex();
var index=getNindex();
// 判断:
// 如果当前下标为最后一张图片的下标,则跳转到第一张,即下标为index为0
// 如果不为最后一张,则跳转到下一张,即下标为index+1;
if(index==arr.length-1){
img.src=arr[0];
index=0;
}else{
img.src=arr[index+1];
index++;
}
//调用函数,且实参为当前img标签下标值
Nindex(index);
}
// function功能与下一张一致
// setInterval():每隔s毫秒执行一次,
// setTimeout():s毫秒后执行
// 格式:
// setInterval(function(){
// },)
// 定时器,每隔5秒切换一次
var timeid= setInterval(function(){
// clearInterval(timeid);
getRadomclass();
getNindex();
var index=getNindex();
if(index==arr.length-1){
img.src=arr[0];
index=0;
}else{
img.src=arr[index+1];
index++;
}
Nindex(index);
},3000)
2.结束语
本次使用js代码完成了一个实现轮播图的案例，还有其他更加简单的js实现方法，欢迎在下方评论。