要使用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"