.113轮播图练习

下面为引入的外部文件tools.js中的内容

// 定义一个获取元素样式的函数
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        // 其他浏览器
        return getComputedStyle(obj, name)[name];
    } else {
        // IE浏览器
        return obj.currentStyle[name];
    }


}

/*
    定义一个移动div的函数
    - obj 执行动画的对象
      target 目标位置
      speed 速度
      style 样式
      callback 回调函数
*/
function move(obj, target, speed, style, callback) {
    // 获取当前div的位置
    var current = parseInt(getStyle(obj, style));
    // 判断速度的正负
    if (current > target) {
        speed = -speed;
    }
    // 由于每点击一次就会开启一个定时器，所以每次都需要关闭前一个定时器
    clearInterval(obj.timer);
    // 创建一个定时器
    obj.timer = setInterval(function () {
        // 获取方块left初始值  parseInt()可以将字符串转换为数字，即获取有效值
        var oldleft = parseInt(getStyle(obj, style));
        // 赋予方块left新值
        var newleft = oldleft + speed;
        // 当到达1000px时停下
        if (newleft < target && speed < 0 || newleft > target && speed > 0) {
            newleft = target;
        }
        // 为方块left设置新值
        obj.style[style] = newleft + 'px';

        if (newleft == target) {
            clearInterval(obj.timer);
            callback && callback();

        }

    }, 30);


}

效果：

点击按钮时，图片会切换；不点击按钮时，图片会自动切换

---