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
});

 

转载于:https://www.cnblogs.com/cui-ting/p/10837833.html