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)。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript事件驅(qū)動(dòng)2008-08-08
使用JavaScript實(shí)現(xiàn)連續(xù)滾動(dòng)字幕效果的方法
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)連續(xù)滾動(dòng)字幕效果的方法,文中給出了瀏覽器端運(yùn)行的示例腳本,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了深入理解Promise.all，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
用YUI做了個(gè)標(biāo)簽瀏覽效果...2007-02-02
這篇文章主要介紹了javascript的this關(guān)鍵字的用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)解析了BootStrap圖片樣式、輔助類樣式和CSS組件源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
今天小編就為大家分享一篇解決layui富文本編輯器圖片上傳無法回顯的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
前端實(shí)現(xiàn)添加水印功能的常見方式小結(jié)
前端水印就是在網(wǎng)頁或應(yīng)用程序的前端界面上添加的一種標(biāo)記,通常是文本、圖標(biāo)或圖案等形式,下面小編就來和大家介紹四個(gè)常用的方法吧2025-03-03
使用javascript訪問XML數(shù)據(jù)的實(shí)例
使用javascript訪問XML數(shù)據(jù)的實(shí)例...2006-12-12
javascript實(shí)現(xiàn)的元素拖動(dòng)函數(shù)宿主為瀏覽器
這篇文章主要介紹了javascript實(shí)現(xiàn)的元素拖動(dòng)，將相應(yīng)的元素對(duì)象的引用傳到函數(shù)中2014-07-07