使用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

博客地址：一天兩天三天

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