bootstrap實現(xiàn)輪播圖效果
更新時間：2021年05月19日 17:09:45 作者：一紙嵐風
這篇文章主要為大家詳細介紹了bootstrap實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了bootstrap實現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)效果
步驟
1、下載bootstrap和jquery-3.6.0.min.js，并在html中引用，注意jq.js應在全部js前引用
2、按照官網(wǎng)https://v3.bootcss.com/javascript/的Carousel實例修改導入圖片，body源碼如下
<div class="box">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./images/xuezhong_1.jpg" alt="...">
<div class="carousel-caption">
圖片1
</div>
</div>
<div class="item">
<img src="./images/guimizhizhu_2.jpg" alt="...">
<div class="carousel-caption">
圖片2
</div>
</div>
<div class="item">
<img src="./images/jianlai_3.jpg" alt="...">
<div class="carousel-caption">
圖片3
</div>
</div>
<div class="item">
<img src="./images/yichang_4.jpg" alt="...">
<div class="carousel-caption">
圖片4
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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>
</div>
在style.css調(diào)整圖片樣式
.box {
width: 600px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
.carousel,
.carousel img {
width: 100%;
height: 300px !important;
}
在js中添加輪播時間
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
可根據(jù)官網(wǎng)的指引修改需要的相關樣式
步驟完成，bootstrap輪播圖實現(xiàn)。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
js + css實現(xiàn)標簽內(nèi)容切換功能(實例講解)
下面小編就為大家?guī)硪黄猨s + css實現(xiàn)標簽內(nèi)容切換功能(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)10秒后再次獲取驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了小試小程序云開發(fā)(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
本文為大家介紹下使用js如何實現(xiàn)動態(tài)改變字體大小，感興趣的額朋友不要錯過2014-01-01
下面小編就為大家?guī)硪黄鶭S查找元素的方法(推薦)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
使用TypeScript?V8來改進您的JavaScript代碼
TypeScript?V8是一個強大的JavaScript類型系統(tǒng),它可以幫助你發(fā)現(xiàn)JavaScript代碼中的錯誤和潛在問題,并在編譯時捕獲它們,以便您可以解決它們,TypeScript?V8為JavaScript提供一系列的類型注釋,包括自定義類型和其他高級功能2023-08-08
簡單說一說對JavaScript原型鏈的理解,希望對大家學習JavaScript原型鏈有所幫助，具體內(nèi)容如下2016-10-10
大家好，本篇文章主要講的是JavaScript優(yōu)雅處理對象的6種方法，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下哦，方便下次瀏覽2021-12-12
???????Rxjs?map,?mergeMap?和?switchMap?的區(qū)別與聯(lián)系
這篇文章主要介紹了???????Rxjs?map,mergeMap和switchMap的區(qū)別與聯(lián)系，map、mergeMap和switchMap是RxJS中的三個主要運算符，在SAP?Spartacus開發(fā)中有著廣泛的使用場景2022-07-07
這篇文章主要介紹了JS中apply()的應用,結(jié)合實例形式分析了apply()操作數(shù)組的相關使用技巧,需要的朋友可以參考下2019-06-06