小圆点及实现图片轮播（js）
1.用span构建小圆点，包在一个div里，active为之后的js做准备。
2.小圆点的css属性
3.小圆点的js属性
（1）实现getElementById的封装，简化代码。
实现图片轮播
（3）构造sliderImg函数及定义全局变量及changeImg函数
#1#先定义index， timer, 取出main的属性
#2#构建sliderImg函数，并自动调用
#3# 在main的div中增加id="main"
main. ，“.”连接属性, 滑出触发定时器
制作定时器timer,3秒增加一次index
套用setInterval(函数,毫秒)间歇调用，使得几秒调用一次中间的函数，
console.log进行测试index是否正常进行（1，2，3......）
#4# 取出banner下所有div的属性
在banner的div中增加id="banner",定义pics（全局变量）为banner下div汇总的一个数组，len为数组长度。使用TagName
#5# 判断当index增加到3， 自动变0。后一条加入可自动触发事件。连接changeImg，实现鼠标划出图片轮播。
#6# 构建changeImg封装，实现所有display成为none（遍历所有的图片图片全部隐藏，），将编号为index的图片显示为block，编号由定时器提供。使得index图片上的display标为block，其他为none，显示当前图片。
#7# 鼠标放上时图片停止轮播，判断定时器timer为真，则清除定时器,实现停止轮播.
#8# 将圆点和图片轮播相绑定，点击触发跳转到index图片.
取出所有dot下的span属性。
为所有span标号，遍历所有span， 由于图片个数对应圆点数目，所以可以使用len， 将所有span的id属性等于编号d(0.1.2),然后将span与点击事件绑定构造一个函数，使得定时器上的index相等于d上的id， 然后绑定切换图片的封装。使得点击任意一个span,运行函数，使得index变为span上的id（d）, 然后绑定changeImg，使得小圆点上一同变化。
封装图片切换增加小圆点切换， 为了方便， 由于图片与小圆点运动是相对应的， 所以，清除圆点属性和图片的display属性可以放入一个遍历里面， 小圆点由于没有定义id属性， 所以可以用className；来直接替换属性， 使得点击的圆点体现active的样式（白）， 其他为默认span的属性。实现圆点切换和图片切换一同实现。
#9# 实现上一张和下一张的图片切换
先在html上增加id属性
取出上下张的属性
为下一张绑定点击事件，构造函数，触发点击事件后，使得index自增1，判断index，一旦大于len,则重新为0，并绑定切换图片函数，使得下一张图片切换实现。
上一张同理，但index的编号始终比len小1，所以需要减1。
#10# 由此实现所有的图片切换效果，
包括图片自动轮播，鼠标放上停住，滑出继续轮播，小圆点点击切换相对应图片，上下张点击切换对应图片。