开发者学堂课程【移动 Web 前端开发：轮播图-静态响应轮播图】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8459
轮播图-静态响应轮播图
静态响应轮播图介绍
将两个轮播图整合在一块。
创建一个静态的响应式轮播图 .html，把样式拷贝过来：
.m_imageBox{
display: block;
width: 100%;
}
.m_imageBox img{
width: 100%;
display: block;
}
-pc_imageBox{
display: block;
width:100%;
height: 450px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
然后把结构：
imageBox" style="background-image:
url( ../images/slide_01_2800x410.jpg); href="#">
然后多放几个，之后把链接修改一下 1 2 3 4：
imageBox" style="background-image:
url( ../images/slide_02_2800x410.jpg); href="#">
imageBox" style="background-image:
url( ../images/slide_03_2800x410.jpg); href="#">
imageBox" style="background-image:
url( ../images/slide_04_2800x410.jpg); href="#">
这样两个轮播图就整合在一块。
现在是大屏设备，所以要把 mimagebox 隐藏：
"m_imageBox hidden-lg"
其他四个也是同样操作，大屏设备就没有问题了。
中屏设备有问题，也不需要 mimagebox 同样小屏设备也不需要，所以："m_imageBox hidden-lg hidden-md hidden-sm"
这时候 大，中，小屏设备都看不到移动端了。
超小屏设备要移动端的，所以要给下边的格子加一个
hidden-xs
就是不想让 pc 端的轮播图在移动端显示。
这样就形成了响应式轮播图。
缺点：
不管是 pc 端还是移动端，同时加载8张图片，任何一个终端初始化之后只需要加载4张图片，在非移动端加载4张大图，移动端加载4张小图，当时移动端的时候会额外加载4张 pc 端的大图，所以造成网页加载速度过慢，影响加载效率。
