offsetWidth與offsetLeft用法之無縫滾動
知識講解：
（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 的 方法，即分別獲取元素寬度和元素距離相對定位的左邊間距；很好的詮釋了無縫滾動圖片的操作效果。