輪播圖製做

 

如今頁面製做愈來愈便捷，製做輪播圖也很簡單。

下面是輪播圖的截圖：

一共有四頁，這是其中的兩頁，下面讓咱們來看看代碼：

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />   //這裏引入jquery和bo0tstrap框架，是寫代碼更加簡單便捷，也須要導入深css樣式，否則輪播圖會出問題。

<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-519501">
</li>
<li data-slide-to="1" data-target="#carousel-519501">
</li>
<li data-slide-to="2" data-target="#carousel-519501">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="img/one.jpg" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/two.jpg" />
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/three.jpg" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/fore.jpg" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-519501" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-519501" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

//4張圖片循環滾動

輪播圖很容易使用，若是想深刻了解能夠查詢相關資料。

在這裏我要分享一個bootstrap的一個插件，網址是http://www.ibootstrap.cn/，但願對你會有幫助，對了

www.jq22.com裏也有不少不錯的插件，很美觀，作出來的效果也比較能吸引顧客吧。

www.jq22.com