今天學(xué)習(xí)bootstrap，發(fā)現(xiàn)輪播圖的實現(xiàn)很強大，于是記錄下來，方便自己以后使用。
1：相關(guān)知識總結(jié)
carousel slide：整個輪播圖的最外邊一層的樣式 data-ride：用于標(biāo)記輪播在頁面加載時就開始動畫播放 data-interval：自動循環(huán)每個項目之間延遲的時間量。如果為 false，輪播將不會自動循環(huán) data-wrap：輪播是否連續(xù)循環(huán) carousel-indicators：輪播圖的小圓點 data-target： data-slide-to：向輪播傳遞一個原始滑動索引 carousel-inner：圖片容器層的樣式
data-slide： 接受關(guān)鍵字 prev 或 next，用來改變幻燈片相對于當(dāng)前位置的位置
2：demo
<body> <div class="container"> <div class="row"> <div class="carousel slide" id="slide" data-ride="carousel" data-interval="2000" data-wrap="true"> <!--輪播圖的小圓點--> <ol class="carousel-indicators"> <li data-target="#slide" data-slide-to="0" class="active"></li> <li data-target="#slide" data-slide-to="1"></li> </ol> <!--整個輪播圖的div--> <div class="carousel-inner"> <div class="item active"> <img src="./image/p1.jpg" alt=""> <div class="carousel-caption"> <h3>商城</h3> <p>第一張圖片</p> </div> </div> <div class="item"> <img src="./image/p2.jpg" alt=""> <div class="carousel-caption"> <h3>商城</h3> <p>第二張圖片</p> </div> </div> </div> <a class="carousel-control left" data-target="#slide" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">‹</span> </a> <a class="carousel-control right" data-target="#slide" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">›</span> </a> </div> </div> </div></body>
以上所述是小編給大家介紹的BootStrap實現(xiàn)輪播圖效果(收藏)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
