js手写轮播图，带小点，左右按钮切换练习

最近在练习js特效，其中轮播图可以说是十分常见的，特地写一篇博客记录一下学习过程。
直接上代码：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>轮播图</title></head><script>window.onload = function() {// 获取节点var items = document.getElementsByClassName(\'item\');var left = document.getElementById(\'left\');var right = document.getElementById(\'right\');var points = document.getElementsByClassName(\'point\');var all = document.getElementById(\'all\');// 给最外层div绑定事件，当鼠标移入的时候，小箭头显示，并且停止自动播放all.onmousemove = function(){left.style.display = \'block\';right.style.display = \'block\';clearInterval(timer);}// 鼠标移出的时候，开启自动播放，并且隐藏小箭头all.onmouseout= function(){left.style.display = \'none\';right.style.display = \'none\';// 开启定时器timer = setInterval(function(){gonext();},2000)}// 定义一个索引值用来记录当前图片var index=0;// 自定义函数，清空所有图片的display和小圆点的classNamefunction clear(){for (var x=0;x<items.length;x++){items[x].style.display = \'none\';}for(var i=0;i<points.length;i++){points[i].className = \'point\'}}// 自定义函数，改变索引的值function goindex(){clear();items[index].style.display = \'block\';points[index].className=\'point active\';}// 自定义函数，前往下一张function gonext(){if(index<4) {index++;} else{index=0;}goindex();}// 自定义函数，前往上一张function gopre(){if(index>0) {index--;} else{index=4;}goindex();}// 给右边的小箭头绑定事件，前往下一张right.onclick = function(){gonext();}// 给左边的小箭头绑定事件，前往上一张left.onclick = function(){gopre();}// 开启定时器，让轮播图自己播放timer = setInterval(function(){gonext();},2000)// 给小点绑定事件，点击时会前往当前图片for(var j=0;j<points.length;j++){points[j].addEventListener(\'click\',function () {index   = this.getAttribute(\'data-index\');goindex();})}}</script><style>.container{position: absolute;width:500px;height:300px;margin-left: 400px;margin-top: 100px;transition: all .5s;}#p1{position: absolute;display: block;width:500px;height:300px;background-color: yellow;}#p2{position: absolute;display: none;width:500px;height:300px;background: red;}#p3{position: absolute;display: none;width:500px;height:300px;background: green;}#p4{position: absolute;display: none;width:500px;height:300px;background: blue;}#p5{position: absolute;display: none;width:500px;height:300px;background: aqua;}.but{width:30px;height:40px;position: absolute;top: 240px;left:410px;border: none;display: none;outline: none;}#left{left:408px;float: left;}#right{left:880px;}.but{z-index: 20;}.pointList{position:absolute;list-style: none;top: 350px;left:570px;}.pointList .point{float: left;background-color: rgba(0,0,0,0.4);width:8px;height:8px;margin-left: 6px;border-radius: 100%;cursor:pointer;}.pointList .active{background:rgba(255,255,255,0.8);}</style><body><div id=\"all\"><div class=\"container\"><div id=\"p1\" class=\"item \">图1</div><div id=\"p2\" class=\"item \">图2</div><div id=\"p3\" class=\"item\">图3</div><div id=\"p4\" class=\"item\">图4</div><div id=\"p5\" class=\"item\">图5</div></div><ul class=\"pointList\"><li class=\"point active\" data-index=\"0\"></li><li class=\"point\" data-index=\"1\"></li><li class=\"point\" data-index=\"2\"></li><li class=\"point\" data-index=\"3\"></li><li class=\"point\" data-index=\"4\"></li></ul><input type=\"button\" value=\"<\" id=\"left\" class=\"but\"><input type=\"button\" value=\">\" id=\"right\" class=\"but\"></div></body></html>

效果如下：