简单的轮播图实现 _轮播

轮播图介绍
轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小，但本文中谈及的轮播图具有以下特性：
它显示在首页的顶部，并占据不用滚动即可显示的页面上相当可观的面积。
同一个地方会展示多页内容，虽然一次只展现一个页面；每页中包含图片以及小段文字。
会有指示器表明，这个轮播图中不止一张图片。
轮播图也有着自己的优缺点：
优点
1.轮播图使得主屏上最重要的位置可以展示多页内容。
2. 页面顶部显示了更多的信息，用户有更大的可能性看到它们。
缺点：
1. 用户经常性地忽视轮播图，连带着里面所有的内容（就算自动滚动也无济于事噢～）——用户压根就不会长时间注意页面的顶部。所以，你不能指望他们能看完轮播图里所有内容。
2. 设计师常常认为轮播图是一组图片，但用户却只会在意他们看到的那一张图片。轮播图中的一组图片，也许能够精准地展现你的产品和服务，但如果用户只看到一组图片中的一张，他也许就会误解你的产品。
1.实现过程：
1.1界面图：
1.2功能介绍
界面顶部的四张小图片用来表示当前显示的图片是第几张，并且底部会有横线；
向左的图标点击后可以跳转到上一张，如果当前为第一张，则跳转到最后一张；
向右的图标点击后可以跳转到下一张，如果当前为最后一张，则跳转到第一张；
中间的大图为正在显示的照片
下面四个小圆点，点击后中间就会显示对应的照片，并且圆点会变成红色；
不进行人为干涉下，每隔一段时间，自动跳转到下一张
整个背景界面，在每一次跳转发生时，都会发生背景颜色的切换，同时在没有进行人为操作时，每隔一段时间背景色也会发生改变，且是随机变化，。
1.3布局准备：
1、界面的顶部，放了四个p标签，里面包含了一张图片分别对应当前界面正在显示的照片，以及span标签，标注当前页面显示的照片是第几张。
2、中间有一个的大盒子，里面包含了上一张功能的div(left)、显示图片的div(box)、下一张功能div(right)三个标签。
3、界面底部有4个小圆点(a标签) ，点击不同的圆点即可显示对应的图片。
1.4代码讲解
首先，先写好html布局，如下：
// 此处给第一个p标签设置class ，并且在css中设置样式，用于对应标签在页面打开时的初始状态
当前在第一张
当前在第二张
当前在第三张
当前在第四张
//此处设置同上方的p标签
`
css布局样式，凭个人喜好，不在此处站式，仅展示需用到的：
. {-: 5px solid red;}
.red {-color: red;}
js代码
在js代码中，首先要考虑程序的几个功能的实现
1、点击小圆点的时候，要显示对应的照片，这时候就要让中间的img标签的src值为a对应a标签的href值，但是， a标签的链接地址会在网页中被解析，如果事先就以将地址放入一个数组中，然后去对应索引位的值赋值给img标签时，后面再用的时候，已写好的对应的a标签href就会和对应的img标签src不相等，所以我们要将a标签的地址直接存放入一个空数组中，这样数组中的地址就会和a标签经过解析后的地址相等