JavaScript之轮播图运动函数

var oDiv=document.querySelectoe('div');
var oBtn=document.querySelector('button')
function move(ele，obj){
//先通过for...in循环，来调用参数2，获取其中的执行属性和目标位置的数值
//目前是obj中，有一个单元会循环一次，生成left方向的定时器
//如果obj中，有多个单元，会循环多次，生成每一个属性对应的定时器
//这样每一个属性都有自己对应的定时器，便于控制和观察运动状态
//type变量中存储的是obj对象的键名也就是left
for(var type in obj){
//初始位置，需要获取标签原始定位的数值
//参数2中，定义的运动数字那个是谁，现在对应的就要获取谁的初始数值
//语法：window.getComputedStyle(标签对象).属性
//这里的属性是存储在type自定义变量中的，必须要用[]语法来解析
var start=parseint(window.getComputedStyle(ele)[type])
//定时器，每次循环都会生成一个新的定时器
var time=setInterval(function(){
//初始数值加上数值
start+=20;
//将数值作为定位的数据
//点语法，不能解析变量，必须使用[]语法，解析存储的变量
//设置标签css，语法是标签对象.style[“属性”/变量]=属性值
//type是for...in循环中自定义的变量，用来存储键名
//要使用时，type是变量，对象.变量，不能解析,只能使用对象[变量]才能解析
ele.style[type]=start+'px';
//当数值达到目标值时，停止定时器
//500是我们的目标数值，获取数值500的语法是：对象[属性]
//属性存储在变量type中，比喻要[]语法才可以解析
if(start==obj[type]){
clearInterval(time);
}
},100)
}
}
//事件监听方式给button标签绑定点击事件
oBtn.addEventListener('click',function(){
move(oDiv,{left:500});
})