本文實例為大家分享了bootstrap輪播圖的具體代碼，供大家參考，具體內容如下
<!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、給最外層添加 ： 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添加 （900為圖片寬度） 5、給兩邊控制按鈕的第一個加上：href="#myCarousel" class="left carousel-control" data-slide="prev" 第二個加上 href="#myCarousel" class="right carousel-control" data-slide="next" --> <div class="carousel slide" > <!--data-ride="carousel"--> <!--<div class="carousel slide" 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>標題</h3> <p>我是內容</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 , /* 設置自動輪播時間*/ pause:'hover',/*設置暫停事件，默認就是鼠標移入輪播圖就暫停，移出繼續，所以可以不用寫*/ /*wrap:false*/ /*只播一次，默認true，循環一直輪播*/ }); /*其他方法 * cycle 循環各幀(默認從左到右) pause 停止輪播 number 輪播到指定的圖片上(小標從 0 開始，類似數組) prev 循環輪播到上一個項目 next 循環輪播到下一個項目 * * * //點擊按鈕執行 $('button').on('click', function () { //點擊后，自動播放 $('#myCarousel').carousel('cycle'); //其他雷同 } * */ //事件 $('#myCarousel').on('slide.bs.carousel', function () { alert('當調用 slide 實例方式時立即觸發'); }); $('#myCarousel').on('slid.bs.carousel', function () { alert('當輪播完成一個幻燈片觸發'); }); </script> </body> </html>
新聞熱點
疑難解答
