使用Bootstrap為你的博客園自定義輪播圖片

  首先上效果圖

效果圖不上也可以，大家直接看我博客就看到效果了，每三秒鍾輪播一次。自定義博客園很簡單。因為博客園支持我們加載js,所以我們怎么玩都可以。

申請開通js權限

首先第一步是申請開通js權限,在這里我不得不說園子的管理效率也太高了。本來以為至少要等一天才能開通權限，結果我24分發郵件，27分就回復我權限已經開通了。

引入Bootstrap css和js 文件

要使用Bootstrap我們首先要引入Bootstrap的js和css文件，為了提高效率，也為了給園子服務器減少壓力（☺☺☺☺估計也沒幾個瀏覽量），我們使用CDN引入

頁首引入<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">。

頁腳引入<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

這兒注意博客園也引入了jquery ,按理說我們不用引入，但是因為，園子的jquery版本太低，使用Bootstrap會報錯。所以我們再次引入jquery。這兒注意jquery多次引用可能在某些特殊情況下會帶來一些特殊問題。如果jquery版本里處理過可能能避免這種情況。一般項目中我們都會使用最新的jquery,所以這兒關於多次引用jquery的問題不在這兒討論。

我的博客園使用的模板是

//這一句代碼隱藏了我博客模板里面的一個背景圖片
$(".day").css("background-image", "url('')"); 
//將模板的右側div設置距離頂端250px;
$("#leftcontent").css("top","250px");
//設置輪播時間為3秒
$('.carousel').carousel({ interval: 3000});

引入html代碼

Bootstrap的使用太簡單了，直接復制拿過來用就可以了。

<div style="height:250px;overflow:hidden"  id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="https://images0.cnblogs.com/blog2015/497507/201504/072234156804516.png" />
            <div class="carousel-caption">
                艾斯之死
            </div>
        </div>
        <div class="item">

            <img src="https://images0.cnblogs.com/blog2015/497507/201504/072224541964718.png" />
            <div class="carousel-caption">
                艾斯之解放
            </div>
        </div>
        <div class="item">
            <img src="https://images0.cnblogs.com/blog2015/497507/201504/072232079464539.png" />
            <div class="carousel-caption">
                艾斯與小馬哥
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

注意我們這兒的標題文字被覆蓋了，因為圖片是隨便找的，大小上沒有微調，所以有的大一些，有的小一些，然后我們通過overflow直接隱藏了，所以下面的標題沒有顯示。

style="height:250px;overflow:hidden" 

至此我們保存一下，就可以看到博客最上面輪播圖片了。

使用script textarea標簽動態加載DOM元素

輪播圖片做好了。但是因為圖片較大，加載起來較慢。打算只在首頁和該貼的頁面增加輪播圖片的。這樣的話只需要用javascript判斷一下http地址就好了。如下

var host = window.location.href;
 if (host == "http://www.cnblogs.com/santian/p/4389675.html") {
   //這里動態加載dom元素
 }

這樣就需要動態加載dom元素，因為如果使用display：none的話，頁面一渲染任然會加載圖片，加載速度還是很慢。所以這兒我們需要另外的方法來加載dom元素。有下面兩種方法。

//script
<script type="text/html" id="theTemplate">
    <div class="dialog"><div class="title"><img src="close.gif" alt="點擊可以關閉" />親愛的提示條</div><div class="content"><img src="delete.jpg" alt="" /><span>您真的要GG嗎？</span></div><div class="bottom"><input id="Button2" type="button" value="確定" class="btn"/>  <input id="Button3" type="button" value="取消" class="btn"/></div></div>
</script>

//textarea
<textarea id="theTemplate" style="display:none">
    <div class="dialog"><div class="title"><img src="close.gif" alt="點擊可以關閉" />親愛的提示條</div><div class="content"><img src="delete.jpg" alt="" /><span>您真的要GG嗎？</span></div><div class="bottom"><input id="Button2" type="button" value="確定" class="btn"/>  <input id="Button3" type="button" value="取消" class="btn"/></div></div>
</textarea>

上面的兩種存放的html可以當做字符串資源來使用如下

//使用script包裹
var template = document.getElementById("theTemplate").innerHTML ;
//使用textarea包裹
var template = document.getElementById("theTemplate").value ;
//下面是我使用的動態加載dom元素的代碼
var template = document.getElementById("theTemplate").innerHTML;
$("body").prepend(template);

　　

通過使用這種方法。我們可以讓整個html加載完畢了再去加載圖片，這樣就不會拖慢速度。

注：圖片和我的模板風格不很配，等慢慢搜集一些喜歡的圖片放上面。另外上面的圖片可能讓人看着眼花繚亂。感到心煩，以后慢慢調整，忘大家海涵。。。。

本文地址：http://www.cnblogs.com/santian/p/4400984.html

博客地址：一天兩天三天

轉載請以超鏈接形式標明文章原始出處。