簡介：
之前在兩個項目的開發過程中都遇到輪播動畫，因此，今天結合自己的開發經驗進行一定的分享，下面是自己用vue做的一個簡單的demo。這個例子的實現主要用的是TweenMax插件+scrollTop實現的。下面的Gif是實現的效果。
html：
css：
爲了讓輪播效果更加自然，隱藏了滾動條。此外，這裏安利一個css屬性object-fit，主要用於img標籤中圖片的定位。本文在demo中設置了圖片的寬高均爲100px，但是很顯然圖片不是正方形的。如果只是單純的設置寬度和高度，則圖片會被變形。如果只設置寬度或者高度，則不好掌控另一邊的尺寸。在實際開發中，可能更多會用到在img標籤外面再包一層div，再對圖片居中設置。但是，object-fit這個屬性可以輕鬆解決這個問題。更加詳細的用法可以參見張鑫旭老師的這篇博客https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/
javascript：
我在該例子中設置的滾動時間爲0.75s，間歇時間爲3s。
TweenMax是一個強大的動畫插件，可以提供高級時間曲線。項目中常見的數字變化特效也可以用該插件來實現。具體的使用方式，這裏不再贅述，主要是講一下實現的思路。
通過TweenMax.to方法，將滾動框這個元素的滾動條高度設置爲100px（剛好爲滾動一個元素的高度），滾動時間scrollTime設置爲0.75s，時間曲線設置爲Power0.easeNone（平滑滾動，也可自行設置其他曲線方式）。同時，這是onComplete回調函數，在滾動結束時，將滑上去的那個元素，即第一個元素添加到隊列末尾。此時滾動條的位置肯定會發生變化，但是由於隱藏了滾動條，因此視覺上看不出變化。隨後再調用setTimeout，設置間隔時間，再開始下一輪的滾動。
其實，個人覺得這種頻繁操作的dom的方式不是很好。隨後，考慮了另一種方式：只改變data的隊列順序來實現輪播效果，思路是刪除並存儲第一個元素，再將其push到隊列末尾。
優化後的代碼：
相信還會有其他方式實現輪播，歡迎討論！