bootstrap轮播图 原点变为方块_bootstrap轮播图carousel插件

一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

二、例子：在PC端使用轮播图(高度固定，图片居中，容器铺满，使用背景图)

.pc_imgBox{

display: block;

height: 400px;

width: 100%;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

.carousel-indicators{

background: #ccc;

}

三、例子：在移动端使用轮播图(宽度自适应，高度自动变化，使用img引入图片)

.m_imgBox{

display: block;

width: 100%;

}

.carousel-indicators{

background: #ccc;

}

四、例子：响应式的轮播图(利用媒体查询自适应PC端和移动端，注意应用在pc和移动端的图片是不一样的！)

.pc_imgBox{

display: block;

height: 400px;

width: 100%;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

.m_imgBox{

display: block;

width: 100%;

}

.carousel-indicators{

background: #ccc;

}

ps:实现轮播图时间间隔改变的两种方式

在data-ride后面加上一个属性data-interval=“millisecond”，其中，millisecond为需要设置的毫秒数，如下：

使用JavaScript语句实现：

官网给出的代码是：

$('.carousel').carousel({

interval: 2000

});