轮播图功能

一般对于前端来说，轮播图是一个几乎必做的小项目，因此今天我们就来说说它的原理：

轮播图的做法千万种，今天我就来说说我的轮播图；

1.首先，要先获取元素，如何获取应该都知道，就不说了；

2.还是要运用排他思想，即只有当前选项有这个类，其他的都没有（goIndex函数便是此效果）；

3.我运用的思路其实是相当于在同一个地方放了很多个图片，然后一张一张的依次翻上来；

4.用自定义属性将圆圈与图片连接起来；

5.设置定时器效果，使它看起来平缓自然；

// 大轮播图
		var items=document.getElementsByClassName('item');
		var goPreBtn=document.getElementById('goPre');
		var goNextBtn=document.getElementById('goNext');
		var points=document.getElementsByClassName('point');
		// var when=0;
		var index=0;	//表示是第几张图片在展示 有active这个类名第几张图片在展示的
		// 第几个点在展示
		var clearActive= function(){
			for(var i=0;i<items.length;i++) {
				items[i].className='item';
			}
			for(var i=0;i<points.length;i++) {
				points[i].className='point';
			}
		}
		var goIndex= function(){
			clearActive();
			points[index].className='point active';
			items[index].className='item active';
		}
		var goNext= function(){
			if(index<items.length-1) {
				index++;
			}else{
				index=0;
			}
			goIndex();
		}
		
		var goPre= function(){
			if(index==0){
				index=items.length;
			}else{
				index--;
			}
			goIndex();
		}
		
		goNextBtn.addEventListener('click',function(){
			goNext();
		})
		
		goPreBtn.addEventListener('click',function(){
			goPre();
		})
		
		for(var i=0;i<points.length;i++){
			points[i].addEventListener('click',function(){
				var pointIndex=this.getAttribute('data-index');
				index=pointIndex;
				goIndex();
				// when=0;
			})
		}
		setInterval(function(){
				goNext();
		},2000);
		// 结束

其实，我刚开始学习的是pink老师的做法，但可能是我学艺不精，做不出来那种效果，总是在报错，要不就是会出现bug，感觉有点难做，于是我又找到了这种简易点的做法，希望大家能喜欢！

现在我正在学习javascript高级，希望可以学会，然后可以再把代码精进些，下一阶段我会写一些关于它的知识点！！