增加 Blogger 網誌照片、圖片自動輪播效果

《 2023 更新文章解決jquery版本太舊手機上無法正確播放的問題：更新文章連結 》

照片、圖片自動輪播 (image slider) 能提高網頁、網誌的吸引力，讓內容看起來更專業、提高點擊率，跟著下面的簡單程序，5 分鐘就能輕鬆的讓網誌、部落格增加這個專業的功能！

《 4 張圖片輪播的 demo 》

1. 備份網誌

新增任何網誌的版面配置或修改主題，請先記得備份目前正常運作的設定喔！

• 登入網誌後，到左上方的主選單選取向下點選「主題」

• 點選備份之後，選擇要備份的位置跟檔案名稱

• 將原本運作正常的主題儲存備份完成後，就可以著手開始加入照片輪播功能了！

2. 增加 jQuery 插件

圖片輪播功能需要用到 jQuery 插件，非常容易、不用害怕，首先需要確認網誌的「主題」(Template) 是否已有相關設定，在 Blogger 主頁面選擇主題，之後點選「編輯 HTML」

進入 HTML 編輯頁面後，Mac 的話按 Command + F 鍵、Windows 的話 Control + F 鍵開啟搜尋對話框。

在搜尋對話框輸入"jquery.min.js"，確認是否已經包含在主題 (Template) 內。

如果沒有的話將以下程式碼複製加到 </head> 之前

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"/>

3. 加上輪播功能的形式 style

增加圖片輪播功能，需要將以下程式碼複製到 </head> 之前

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />

接下來將以下的 CSS 格式設定程式碼，複製到主題的 ]]></b:skin> 之前

.bxslider img{
width:100%;
height:100%;
}
.bx-wrapper img{
display: inline !important;
}

有需要的可以調整上面的 width、height 來改變圖片尺寸

4. 加上需要的 script

搜尋 </head>，將以下的程式碼複製貼到 </head> 之前

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            pause: 50000,
 // in millisecond
            autoHover: true, // pause on hover
            autoControls: true,
            captions: false
        });
    });
</script>

需要的話可以修改上方程式碼的輪播功能參數

• auto: true 代表自動輪播
• pause: 5000 代表輪換週期為 5 秒
• autoHover: true 代表滑鼠移到上方暫停輪播
• autoControls: true 代表可以控制顯示上、下一張圖片
• captions: false 代表不顯示圖片的標題

前述的動作完成後範本應該長的像下面這樣👇 (註：筆者因內嵌 Youtube 的設定，已經在別處設定了 jquery，所以步驟 2 的程式碼並未加在 </head> 之前)

實際呈現的效果

所有設定都已經完成，接下來就是在網誌的頁面上加上輪播的圖片，播放的圖片數量並無限制，進入文章編輯模式，切換到的 HTML 檢視模式

將以下的 HTML 程式碼加到文章內需要增加圖片輪播的位置，將 "ImageURL" 替換為圖片的網址，需要的話可以 ‘輸入圖片標題’ 或者留空。

<ul class="bxslider">
<li><img src="ImageURL1" title='輸入圖片標題' /></li>
<li><img src="ImageURL2" title='輸入圖片標題' /></li>
<li><img src="ImageURL3" title='輸入圖片標題' /></li>
<li><img src="ImageURL4" title='輸入圖片標題' /></li>
</ul>

如果要圖片能夠被點擊、連結到特定網頁，可以在 <img... /> 之前增加 <a href=..> 的敘述

<li><a href=“Your LINK"><img src=“IMAGE URL” alt=“ALT TEXT GOES HERE" /></a></li>

完成後就可以得到前面的輪播效果了～