本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下
函数封装:( 匀速运动函数)
function animate(obj,target,step,speed){
clearInterval(obj.timer);
var absStep = Math.abs(step);
step = target > obj.offsetLeft ? absStep : -absStep;
obj.timer = setInterval(function(){
var distance = Math.abs(target - obj.offsetLeft);
obj.style.left = obj.offsetLeft + step + 'px';
if(distance < absStep){
clearInterval(obj.timer);
obj.style.left = target + 'px';
}
},speed);
}
对象可以动态生成属性,用对象的timer,避免了全局变量的使用,
实现步骤:
1.动态生成ol导航条,并将导航条放入all中使其成为孩子节点
2.根据ul中图片数量动态生成li标签,使li成为ol的子节点,
3.给第0个li标签加上颜色(添加属性current)
4.用设置的属性的值去操作图片使图片移动,达到鼠标放上去移动到该图片效果,排它原理实现样式效果