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