Bootstrap輪播圖的使用和理解4
更新時間：2016年12月14日 08:36:52 作者：浪跡灬天涯
這篇文章主要為大家詳細介紹了關(guān)于Bootstrap輪播圖的使用和理解的學習記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap輪播圖的實現(xiàn)代碼，供大家參考，具體內(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">
<title>Bootstrap 模板</title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
img {
width: 100%;
height: 100%;
}
p {
text-align: center;
}
</style>
</head>
<body>
<!-- 輪播圖部分 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<!-- 包裹幻燈片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/輪播1.png" alt="輪播圖1">
<div class="carousel-caption">
輪播圖1
</div>
</div>
<div class="item">
<img src="images/輪播2.png" alt="輪播圖2">
<div class="carousel-caption">
輪播圖2
</div>
</div>
<div class="item">
<img src="images/輪播3.png" alt="輪播圖3">
<div class="carousel-caption">
輪播圖3
</div>
</div>
<p>輪播圖嘗試</p>
</div>
<!-- Controls -->
<!-- 控制 -->
<!-- 向左滑動 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
<span class="sr-only">Previous</span>
</a>
<!-- 向右滑動 -->
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- js控制輪播圖 -->
<button id="prev">向前</button>
<button id="next">向后</button>
<button id="pause">停止</button>
<button id="start">開始</button>
<button id="jump">到第二張</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 輪播圖還支持js控制 -->
<script>
$(function(){
$('.carousel').carousel({
interval: 2000,//輪播間隔
pause:"hover", //鼠標懸停在輪播圖上，是否停止?jié)L動
wrap:true, //
keyboard:true //響應(yīng)鍵盤事件
});
$("#prev").click(function(event) {
$('.carousel').carousel('prev')// 周期上一個項目。
});
$("#next").click(function(event) {
$('.carousel').carousel('next')// 周期到下一個項目。
});;
$("#pause").click(function(event) {
$('.carousel').carousel('pause')// 從通過項目循環(huán)停止傳送帶。
});;
$("#start").click(function(event) {
$('.carousel').carousel('cycle')// 通過傳送帶項目周期從左到右。
});;
$("#jump").click(function(event) {
$('.carousel').carousel(1)// 循環(huán)傳送帶到一個特定的幀（0為主，類似于數(shù)組）。
});;
});
</script>
</body>
</html>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 利用BootStrap的Carousel.js實現(xiàn)輪播圖動畫效果
- 使用BootStrap進行輪播圖的制作
- BootStrap實現(xiàn)輪播圖效果(收藏)
- 使用BootStrap建立響應(yīng)式網(wǎng)頁——通欄輪播圖（carousel）
- Bootstrap幻燈片輪播圖支持觸屏左右手勢滑動的實現(xiàn)方法
- BootStrap實現(xiàn)手機端輪播圖左右滑動事件
- 通過BootStrap實現(xiàn)輪播圖的實際應(yīng)用
- Bootstrap開發(fā)實戰(zhàn)之響應(yīng)式輪播圖
- Bootstrap每天必學之響應(yīng)式導(dǎo)航、輪播圖
- Bootstrap實現(xiàn)基于carousel.js框架的輪播圖效果
相關(guān)文章
這篇文章主要介紹了簡單了解JavaScript arguement原理及作用,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
Bootstrap是twitter的工程師在業(yè)余時間開發(fā)的，是一款目前非常流行的前端框架。本文給大家介紹第一篇初識bootstrap的相關(guān)知識，非常不錯具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
JS實現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法
這篇文章主要介紹了JS實現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法,實例分析了javascript彈出特效的css與提示框的具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
用函數(shù)模板,寫一個簡單高效的 JSON 查詢器的方法介紹
本篇文章小編將為大家介紹，用函數(shù)模板,寫一個簡單高效的 JSON 查詢器的方法介紹，需要的朋友可以參考一下2013-04-04
這篇文章主要介紹了js實現(xiàn)頂部可折疊的菜單工具欄效果,可實現(xiàn)鼠標滑過菜單工具欄出現(xiàn)折疊與展開效果,涉及javascript鼠標事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05
本文主要是為了讓大家更好的理解js的面向?qū)ο?，通過實現(xiàn)拖拽效果向大家展示js面向?qū)ο?，非常不錯，這里推薦給大家。2015-02-02
這篇文章主要介紹了JavaScript的一些小技巧分享，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01
js實現(xiàn)接收表單的值并將值拼在表單action后面的方法
這篇文章主要介紹了js實現(xiàn)接收表單的值并將值拼在表單action后面的方法,涉及JavaScript動態(tài)操作字符串及表單元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家介紹了Ajv format校驗使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
js使用文檔就緒函數(shù)動態(tài)改變頁面內(nèi)容示例【innerHTML、innerText】
這篇文章主要介紹了js使用文檔就緒函數(shù)動態(tài)改變頁面內(nèi)容,結(jié)合實例形式分析了JavaScript使用innerHTML、innerText函數(shù)動態(tài)操作頁面元素相關(guān)使用技巧,需要的朋友可以參考下2019-11-11