溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關使用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、給最外層添加 ：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添加 （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" >
<!--data-ride="carousel"-->
<!--<div id="myCarousel" 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"> <!--可以給輪播圖添加文字-->
<h4>標題</h4>
<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>關于使用bootstrap如何實現一個輪播圖就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
