沒有什麼比在網站上加入動畫效果更令人欲罷不能了! 這次介紹的跑馬燈常用在公告訊息、活動優惠，是很吸睛又經典的作法。適用的網站類型可說是相當廣泛喔!雖然 HTML 有<marquee>這個元素可以使用，但是一次只能顯示一筆資訊。若要輪播多筆資訊，網路上比較多是利用套件的做法。我的想法是如果可以簡單的寫出動畫，就可以不用多套一個套件囉!
正篇開始 👇
step 1. HTML & CSS 佈局
將<ul>設定單行高度，並把超出的部分隱藏。
step 2. 載入jQuery加入動畫
這裡會用到兩個方法。setInterval( )用來設定重複動作及間隔時間，appendTo( )則是將選擇器插入到目標元素的最後面。
概念: 將第一個<li>內容收合，並插入到最後面。且每間隔3秒重複執行一次。
完成效果 👏
