您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)使用bootstrap如何實(shí)現(xiàn)一個(gè)輪播圖,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
具體內(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" 然后每個(gè)li添加綁定 data-target="#myCarousel" data-slide-to=0,1,2 并且第一個(gè)首選 加active 4、限定寬度和圖片一樣寬,給最外層div添加 (900為圖片寬度) 5、給兩邊控制按鈕的第一個(gè)加上:href="#myCarousel" class="left carousel-control" data-slide="prev" 第二個(gè)加上 href="#myCarousel" class="right carousel-control" data-slide="next" --> <div id="myCarousel" class="carousel slide" > <!--data-ride="carousel"--> <!--<div id="myCarousel" class="carousel slide" data-ride="carousel">--> <!--自動(dòng)輪播,默認(rèn)5秒--> <ol class="carousel-indicators"><!--輪播器中間3個(gè)點(diǎn)--> <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"> <!--可以給輪播圖添加文字--> <h4>標(biāo)題</h4> <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();/*自動(dòng)輪播,默認(rèn)5秒*/ $('#myCarousel').carousel({ interval:3000 , /* 設(shè)置自動(dòng)輪播時(shí)間*/ pause:'hover',/*設(shè)置暫停事件,默認(rèn)就是鼠標(biāo)移入輪播圖就暫停,移出繼續(xù),所以可以不用寫(xiě)*/ /*wrap:false*/ /*只播一次,默認(rèn)true,循環(huán)一直輪播*/ }); /*其他方法 * cycle 循環(huán)各幀(默認(rèn)從左到右) pause 停止輪播 number 輪播到指定的圖片上(小標(biāo)從 0 開(kāi)始,類(lèi)似數(shù)組) prev 循環(huán)輪播到上一個(gè)項(xiàng)目 next 循環(huán)輪播到下一個(gè)項(xiàng)目 * * * //點(diǎn)擊按鈕執(zhí)行 $('button').on('click', function () { //點(diǎn)擊后,自動(dòng)播放 $('#myCarousel').carousel('cycle'); //其他雷同 } * */ //事件 $('#myCarousel').on('slide.bs.carousel', function () { alert('當(dāng)調(diào)用 slide 實(shí)例方式時(shí)立即觸發(fā)'); }); $('#myCarousel').on('slid.bs.carousel', function () { alert('當(dāng)輪播完成一個(gè)幻燈片觸發(fā)'); }); </script> </body> </html>
關(guān)于使用bootstrap如何實(shí)現(xiàn)一個(gè)輪播圖就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。