Bootstrap圖片旋轉輪播的實現


bootstrap初級知識旋轉輪播

源文件:carousel.js、carousel.less

CSS文件:bootstrap.css

這些源文件可以從bootstrap中下載,關於輪播,有很多譯法,有人叫輪播,有人叫傳送帶。輪播效果默認是向左輪播,大家先看一下效果圖哦!

下面是源代碼:

<div class="row">
<div id="mid" class="col-xs-6">
<div data-ride="carousel" class="carousel slide" id="carousel-container">
<div class="carousel-inner">

/*--這里放置輪播的圖片 --*/
<div class="item"><img alt="第一張圖" src="#"></img></div>
<div class="item active"><img alt="第二張圖" src="#"></img></div>
<div class="item"><img alt="第三張圖" src="#"></img></div>
</div>
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-container"></li>
<li data-slide-to="1" data-target="#carousel-container"></li>
<li data-slide-to="2" data-target="#carousel-container" class="active"></li>
</ol>
<a data-slide="prev" href="#carousel-container" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" href="#carousel-container" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>

旋轉輪播組件的自定義屬性
屬性名稱 類型 默認值 描述
data-interval number 5000 幻燈片輪播的等待時間(毫秒)。如果為false,輪播將不會自動開始循環
data-pause string hover 默認鼠標停留在幻燈片區域即暫停輪播。鼠標離開即啟動輪播
data-wrap boolean true 輪播是否持續循環


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM