知识讲解：

（1）offsetWidth是什么？

　　答：它可以获取物体宽度的数值；offsetWidth实际获取的是盒模型(width+border + padding)的宽度。

　　　　如图：

　　　　

（2）offsetLeft是什么？

　　答：获取的是当前对象左侧距离父对象左侧的值(均不包含border)。

另外：　  style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距。
　　　　　clientLeft:获取的是当前对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离。

　　　　　如果父对象的position定义为relative【相对定位】,子对象的position定义为absolute【绝对定位】，那么子对象的style.left的值是相对于父对象的值,等同于offsetLeft的值。

offsetLeft和style.left的区别：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。

 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。

3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。　　offsetLeft则仍然能够取到，无需事先定义div的位置。　　//可以查看下面的案例代码（29、39行）

 

案例：无缝滚动图片

//css代码如上

 以上js代码可以实现了简单的无缝滚动图片的方法。

代码解释：

1.　　26行代码：获取到唯一的oDiv中的ul。若用getElementsByTagName来获取元素需要加上数组[0]才能准确的获取到ul的值；或者可以直接用getElementById来获取。（注：前面2019.4.27有发表过文章）

2.　　35行代码：在计数器setInterval（）函数中让ul中的内容向左不断滚动，每次向左移动5px的距离。

3.　　32行代码：完成第二步代码后，要让ul中的图片连续在水平线上滚动起来需要获取到ul的宽度才行（即：其中一个li的宽度*li的总数即可）。

4.　　31行代码：此步骤用于复制多的一份ul中的图片，让它以8张图片进行滚动。

5.　　36行代码：if语句判断，当图片向左滚动，剩下的长度小于ul的总宽度的一半时，让ul的left值设置为0px（即：让第一张图片回到第八张图片的后面，然后依次可以进行循环操作，这个方法是让计算机自动完成的，执行速度很快）

其中，以上代码灵活运用了offsetWidth和offsetLeft的方法，即分别获取元素宽度和元素距离相对定位的左边间距；很好的诠释了无缝滚动图片的操作效果。