html5时间线图片自动轮播,js实现自动播放匀速轮播图

本文实例为大家分享了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.用设置的属性的值去操作图片使图片移动，达到鼠标放上去移动到该图片效果，排它原理实现样式效果