要使用html+css實現網站輪播,代碼如下
首先引入bootstrap
外包裹
div class="carousel" data-ride="carousel"
創建輪播,使用carousel類,
讓圖片動起來data-ride="carousel"
內部第一層,輪播圖片
<div class="carousel-inner">
<div class="carousel-item active">img</div>
<div class="carousel-item">img</div>
<div class="carousel-item">img</div>
</div>
需要使用div把所有圖片包裹,使用類名carousel-inner
每一個img還需要包裹一個div,使用carousel-item
carousel-item ---->display:none;把所有圖片隱藏
.carousel-item.active 會把隱藏的div顯示
在carousel-item內部,可以添加div.carousel-caption添加文字
內測第二部分,導航標識符
使用ul class="carousel-indicators"
.carousel-indicators>li 樣式已經寫好,並且隨着圖片輪播,改變表示
但是不能點擊便是改變圖片
li class="active" 背景變為白色,被激活的li
點擊li,改變圖片
在li中 data-slide-to="0" 圖片的下標
data-target="#當前輪播圖ID"
內部第三部分:左右箭頭
a class=" carousel-control-prev"
畫的左箭頭<span class="carousel-control-prev-icon">
a class=" carousel-control-next"
畫的右箭頭<span class="carousel-control-next-icon">
需要事件,data-slide="prev/next" data-target="#輪播圖ID"