bootstrap實(shí)現(xiàn)輪播圖效果
更新時(shí)間：2021年05月19日 17:09:45 作者：一紙嵐風(fēng)
這篇文章主要為大家詳細(xì)介紹了bootstrap實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap實(shí)現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果
步驟
1、下載bootstrap和jquery-3.6.0.min.js，并在html中引用，注意jq.js應(yīng)在全部js前引用
2、按照官網(wǎng)https://v3.bootcss.com/javascript/的Carousel實(shí)例修改導(dǎo)入圖片，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中添加輪播時(shí)間
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
可根據(jù)官網(wǎng)的指引修改需要的相關(guān)樣式
步驟完成，bootstrap輪播圖實(shí)現(xiàn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)無縫輪播圖
- jQuery呼吸輪播圖制作原理詳解
- jQuery實(shí)現(xiàn)呼吸輪播圖
- jQuery實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果
- 用jquery實(shí)現(xiàn)輪播圖效果
- jquery插件實(shí)現(xiàn)輪播圖效果
- JS+JQuery實(shí)現(xiàn)無縫連接輪播圖
- Swiper如何實(shí)現(xiàn)兩行四列輪播圖效果實(shí)例
- Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果
- jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能示例【代碼解釋】
相關(guān)文章
js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
JavaScript實(shí)現(xiàn)10秒后再次獲取驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)10秒后再次獲取驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了小試小程序云開發(fā)(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
js實(shí)現(xiàn)動(dòng)態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實(shí)現(xiàn)動(dòng)態(tài)改變字體大小，感興趣的額朋友不要錯(cuò)過2014-01-01
下面小編就為大家?guī)硪黄鶭S查找元素的方法(推薦)。小編覺得挺不錯(cuò)的，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
使用TypeScript?V8來改進(jìn)您的JavaScript代碼
TypeScript?V8是一個(gè)強(qiáng)大的JavaScript類型系統(tǒng),它可以幫助你發(fā)現(xiàn)JavaScript代碼中的錯(cuò)誤和潛在問題,并在編譯時(shí)捕獲它們,以便您可以解決它們,TypeScript?V8為JavaScript提供一系列的類型注釋,包括自定義類型和其他高級(jí)功能2023-08-08
簡(jiǎn)單說一說對(duì)JavaScript原型鏈的理解,希望對(duì)大家學(xué)習(xí)JavaScript原型鏈有所幫助，具體內(nèi)容如下2016-10-10
JavaScript優(yōu)雅處理對(duì)象的6種方法
大家好，本篇文章主要講的是JavaScript優(yōu)雅處理對(duì)象的6種方法，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下哦，方便下次瀏覽2021-12-12
???????Rxjs?map,?mergeMap?和?switchMap?的區(qū)別與聯(lián)系
這篇文章主要介紹了???????Rxjs?map,mergeMap和switchMap的區(qū)別與聯(lián)系，map、mergeMap和switchMap是RxJS中的三個(gè)主要運(yùn)算符，在SAP?Spartacus開發(fā)中有著廣泛的使用場(chǎng)景2022-07-07
這篇文章主要介紹了JS中apply()的應(yīng)用,結(jié)合實(shí)例形式分析了apply()操作數(shù)組的相關(guān)使用技巧,需要的朋友可以參考下2019-06-06