部落格園隨機切換背景圖，超簡單教程
阿新 • • 發佈：2020-08-03
目錄
一、前言
部落格園做的還是挺強大的，很多東西都支援自定義，比較適合喜歡瞎搗鼓的小夥伴。之前寫過一篇部落格園看板孃的教程，有興趣的小夥伴可以看一下：https://blog.csdn.net/Wjhsmart/article/details/107083930。今天給大家分享一下怎麼樣自動更換背景圖片，實現原理很簡單，利用JS的定時任務隨機更換準備好的一些相簿即可。
二、準備工作
要更新背景圖片當然得先準備好一些相簿來了，部落格園支援自定義上傳一些喜歡的背景圖片，大家可以先把自己喜歡的背景圖都先上傳到部落格園中。找到設定-相簿，新建一個相簿，然後上傳圖片。
三、實現程式碼
圖片上傳完了之後將以下程式碼追加到部落格園的自定義JS當中。記得把圖片路徑換成自己的路徑哦。
<script type="text/javascript">
var bodyBgs = []; //建立一個數組變數來儲存背景圖片的路徑
bodyBgs[0] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516065.jpg";
bodyBgs[1] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516333.jpg";
bodyBgs[2] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516461.jpg";
bodyBgs[3] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005302120.jpg";
bodyBgs[4] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005393260.jpg";
bodyBgs[5] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300530559.jpg";
bodyBgs[6] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005310729.jpg";
bodyBgs[7] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_20073005312666.jpg";
bodyBgs[8] = "https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_200730055501158.jpg";
var int=self.setInterval("clock()",10000);
function clock()
{
var randomBgIndex = Math.round( Math.random() * 8 );
document.body.style.background = "url("+bodyBgs[randomBgIndex]+") fixed";
}
</script> 最後別忘記了點最下面的儲存哦
如果想設定預設圖片，只需要把下面程式碼追加到CSS的後面。
#home {
opacity: 0.70;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516461.jpg
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
} opacity：是設定透明度的
background：url中的地址換成自己的地址即可
四、結尾
怎麼樣？是不是超級簡單，小夥伴們有沒有學會呢？聽說好看的小哥哥，小姐姐看完文章都會給博主點個小小的贊哦，你點讚了嗎^_^
想看更多博主的精彩好文，請移步：http://wjhsmart.vip。有自己建站的小夥伴還可以聯絡博主互聯哦。