定时器轮播图

定时器轮播图

1.动态封装函数
// 如果样式的代码在style的标签中设置, 外面是获取不到的
//获取div当前的位置
console.log(my$(“dv”).offsetLeft);// 数字类型 没有px

        //点击按钮移动到400px , 每过20毫秒移动10px
        my$("btn").onclick = function () {
            animate(my$("dv"), 400)
        }
        //点击第二个按钮移动到800px
        my$("btn1").onclick = function () {
            animate(my$("dv"), 800)
        }
        //定义动画函数 ;  目标位置需要变,  元素要变
// function animate(element , target) {
//   clearInterval(element.timeId);
//   element.timeId=setInterval(function(){
//    var current=element.offsetLeft;
//    var step=10;
//    step=currentMath.abs(step)){
//        element.style.left=current+"px";
//    } else{
//        clearInterval(element.timeId);
//        element.style.left=target+"px";
//    }
//   },20)


// }
//         function animate(element,target){
//         clearInterval(element.timer)
//         var left = element.offsetLeft;

//     //设置步长 表示一步动作的差值
//     //通过比较element当前的left值和target值的大小，来确定平移方向
//     var step = (target - left) / 10;

//     element.timer = setInterval(function(){
//         //如果目标值大于当前的left值，step为正数，向右移动
//         //如果目标值小于当前的left值，step为负数，向左移动
//         left += step;
//         element.style.left = left + 'px';

//         //判断停止动画
//         //比较差值，取绝对值，当两者的差值小于了步进值时，停止动画，
//         if(Math.abs(target - left) <= Math.abs(step)){
//             clearInterval(element.timer);
//             element.style.left = target + 'px';
//         }    
//     },60);
// }