记录学习前端知识的旅程【4】

        轮播图又称焦点图，是网页制作中必不可少的，现在几乎每个网站都会使用，虽然网上有很多模版，但我还是决定亲手写一次，感觉里面涉及了很多知识，控制变量，绑定事件，回调函数实现动画移动，定时器。

思路：

1、先把静态页面搭建好

2、实现鼠标移到div中左右按钮出现，离开按钮消失。

3、实现小圆点根据图片个数自动生成，for循环利用document.createElement()创建小圆点中的li，然后 父级.appendChild（子级）增加li

4、利用排他思想，给小圆点的点击事件加背景色

5、当小圆点被点击时，利用动画函数实现移动，记得给小圆点添加索引号，方便实现移动距离，可以利用setAttribute添加自定义属性。

下面我给出移动的动画函数，obj要移动的对象（需要加定位），target要移动的距离（可以动态获取：用索引号*div.offsetWidth），callback回调函数，可以不写，这里我之后用来实现节流阀。

	//函数封装
	function animate(obj,target,callback){
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			//缓动动画公式（（目标值-现在的位置）/10）
			var step=(target-obj.offsetLeft)/10;
			step=step>0?Math.ceil(step):Math.floor(step);
			if(obj.offsetLeft==target){
				clearInterval(obj.timer);
				callback&&callback();
			}
			obj.style.left=obj.offsetLeft+step+'px';
		},15)
	}

6、实现左右按钮点击事件，也是使用动画函数，这里提一下无缝衔接，可以利用cloneNode(true)复制第一张图片然后apoendChild来实现，记得判断到第一张和最后一张的情况，调整图片的位置。

7、利用定时器setInterval();其实也就相当于每隔几秒点击一下右按钮，所以可以在定时器中写righticon.click()，righticon（是我的右按钮类名） 这个可以手动调用右按钮点击事件，在定时器中写就可以实现 每隔几秒调用一次右按钮的点击事件;

好了，思路就是这样了。

源码我就不加上了，毕竟网上有太多了，随便找找一大把。emmm 我只是说一下我写的大概思路 hhh～。