單純的文字跑馬燈可能不能滿足你的需求，其實網頁跑馬燈除了在文字下功夫之外，還可以加入圖片的效果唷！這篇就簡單介紹如何為跑馬燈加入圖片效果，要注意的是圖片來源必須能夠正確顯示，最好是把圖片存在自己的伺服器中，因為有些網站的圖檔是禁止外連的，就算家到你的網頁中也無法正常顯示。

圖片語法寫法很簡單，你可以寫成這樣：<img  src="圖片網址">。把這段語法與跑馬燈組合起來就可以囉！

圖片式跑馬燈程式語法呈現效果由於我們都沒有特別的設定參數，所以圖片依照瀏覽器預設的方式移動，請參考相關閱讀的教學，了解如何設定跑馬燈的參數，包含了跑馬燈的速度、跑動方向、長度、寬度與跑動行為等設定。

相關閱讀

• 網頁跑馬燈語法教學 HTML marquee 程式設計
• 滑鼠移入就會自動停止的網頁跑馬燈語法

您可能會想看

• HTML div 標籤
• 設計 HTML 圖片與圖片邊框間的距離
• DIV 區塊內文字與邊框的距離調整
• HTML TABLE 表格內的文字行高
• DIV 區塊內的文字行高設計
• 替 HTML button 按鈕增加背景圖片
• HTML img title 與 img alt 的差別
• 用 CSS 設計 HTML 表格欄位內文字靠下對齊
• 用 CSS 設計 HTML 表格欄位內文字靠上對齊
• HTML Table colspan 屬性

今日熱門文章

• PHP 8 字串處理
• PHP 8 二維陣列
• PHP 8 一維陣列
• PHP 8 陣列基本觀念
• PHP 8 自定義函數
• 常用的 PHP 8 內建函數
• PHP 8 函數介紹
• PHP 8 的巢狀迴圈及應用
• 用 PHP 8 巢狀迴圈寫九九乘法表範例
• 用 continue 繼續新一輪 PHP 8 迴圈

即時熱門文章

• PHP 8 字串處理
• PHP 8 二維陣列
• PHP 8 一維陣列
• PHP 8 陣列基本觀念
• PHP 8 自定義函數
• 常用的 PHP 8 內建函數
• PHP 8 函數介紹
• PHP 8 的巢狀迴圈及應用
• 用 PHP 8 巢狀迴圈寫九九乘法表範例
• 用 continue 繼續新一輪 PHP 8 迴圈