offset、client、scroll有什么区别

1.offset、client、scroll系列

offsetLeft、offsetTop获取元素距离最左边的距离：

(1)、如果父元素没有定位，距离浏览器最左侧的距离

(2)、如果父元素有定位，距离父元素最左侧的距离

offsetWidth:获取元素的宽度，包括border及以内，不包括margin

offsetHeight:获取元素的高度，包括border及以内，不包括margin

scroll系列

scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度

scrollWidth和scrollHeight:获得元素的实际宽度和高度

client系列

clientTop和clientLeft：获得上边框和左边框的宽度。

clientWidth和clientHeight：获取可视范围的宽度高度，不包括border，包括padding.

1. 自动轮播图

 var box = document.getElementById("box")

    // box.scrollLeft = 300

    var imgWidth = document.querySelector('img').clientWidth

    var num = 0

    setInterval(function () {

        if (num >= 4) {

            num = 0

        }

        box.scrollLeft = num * imgWidth

        move()

        num++

    }, 5000)

    function move() {

        var num2 = 0

        var timer2 = setInterval(function () {

            var step = imgWidth/10

            box.scrollLeft =  box.scrollLeft + step

            num2++

            if(num2>10){

                clearInterval(timer2)

            }

        }, 100)

    }

1. 封装

 function $(select) {

      Return（要有返回值） document.querySelector(select)

}