本文實例為大家分享了bootstrap輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>XXX</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="css/main.css"> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> </head> <body> <!--輪播器 1、給最外層添加 ：id="myCarousel" class="carousel slide" 2、給輪播器3張圖片的最外層div添加 ：class="carousel-inner" 給每張圖片的父div添加 class="item" 并且第一張首選 加active 3、給ol添加class="carousel-indicators" 然后每個li添加綁定 data-target="#myCarousel" data-slide-to=0,1,2 并且第一個首選 加active 4、限定寬度和圖片一樣寬，給最外層div添加 style="width: 900px;" （900為圖片寬度） 5、給兩邊控制按鈕的第一個加上：href="#myCarousel" class="left carousel-control" data-slide="prev" 第二個加上 href="#myCarousel" class="right carousel-control" data-slide="next" --> <div id="myCarousel" class="carousel slide" style="width: 900px;"> <!--data-ride="carousel"--> <!--<div id="myCarousel" class="carousel slide" style="width: 900px;" data-ride="carousel">--><!--自動輪播，默認5秒--> <ol class="carousel-indicators"><!--輪播器中間3個點--> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"><!--輪播器3張圖片--> <div class="item active"> <img src="img/slide1.png" alt="第1張圖片"> <div class="carousel-caption"> <!--可以給輪播圖添加文字--> <h3>標(biāo)題</h3> <p>我是內(nèi)容</p> </div> </div> <div class="item"> <img src="img/slide2.png" alt="第2張圖片"> </div> <div class="item"> <img src="img/slide3.png" alt="第3張圖片"> </div> </div> <!--輪播器兩邊控制按鈕--> <a href="#myCarousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> <script> // $('#myCarousel').carousel();/*自動輪播，默認5秒*/ $('#myCarousel').carousel({ interval:3000 , /* 設(shè)置自動輪播時間*/ pause:'hover',/*設(shè)置暫停事件，默認就是鼠標(biāo)移入輪播圖就暫停，移出繼續(xù)，所以可以不用寫*/ /*wrap:false*/ /*只播一次，默認true，循環(huán)一直輪播*/ }); /*其他方法 * cycle 循環(huán)各幀(默認從左到右) pause 停止輪播 number 輪播到指定的圖片上(小標(biāo)從 0 開始，類似數(shù)組) prev 循環(huán)輪播到上一個項目 next 循環(huán)輪播到下一個項目 * * * //點擊按鈕執(zhí)行 $('button').on('click', function () { //點擊后，自動播放 $('#myCarousel').carousel('cycle'); //其他雷同 } * */ //事件 $('#myCarousel').on('slide.bs.carousel', function () { alert('當(dāng)調(diào)用 slide 實例方式時立即觸發(fā)'); }); $('#myCarousel').on('slid.bs.carousel', function () { alert('當(dāng)輪播完成一個幻燈片觸發(fā)'); }); </script> </body> </html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
