开发者学堂课程【移动 Web 前端开发：轮播图-动态响应轮播图-分析】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8460
轮播图-动态响应轮播图-分析
内容简介：
之前完成了一个导航条，并且是一个详细的导航条，它的 bootstrap 已经给了一个组件。
因为调整好了 bootstrap 的运营环境，拿过来直接就可以用，但是它和产品还是有一定的差距。
那么要把预制的图片修改为产品的一个导航条，就需要那么几个步骤，是使用bootstrap 当中里面的一个方法，把样式弄明白，把样式等于选择器给覆盖掉，然后凸显样式，再调整一下响应项，bootstrap 还涉及到轮播图这块内容，把carousel 轮播图组件结构分析了一遍，做了一个非移动端的，做了一个移动端的，把两个东西都整合在一起做了一个静态的响应式的轮播图。
那么静态的响应式轮播图功能已经实现了，可以把这个轮播图移到 index.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;
}
这段样式是需要的，在 index.css 中另起一个模块复制进来。
/*轮播图*/
.wjs_banner{}
这些样式是属于 banner 模块的，每一个选择器前面都加一个 wjs_banner，代码如下：
.wjs_banner{
border- bottom :1px solid #ccc ;
}
wjs_banner.m_imageBox{
display: block;
width:100%;
}
wjs_banner.m_imageBox img{
width: 100%;
display: block;
}
wjs_banner.pc_imageBox{
display: block;
width: 100%;
height: 450px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
轮播图下面来一个边框就可以了，样式齐了，要把 html 结构复制过来，要把整块内容都粘贴过去，放在 banner 区域里面，现在 banner 不需要版型，它占满了整个屏幕，样式就可以直接删掉，删掉之后结构对了，路径不对，需要把../去掉，../相对是同级目录，没必要整上一级的，把../去掉，这时目录就没有问题了，包括图片。
这就是放在首页当中的轮播图。
刷新一下页面，轮播图就有了，可以切换。
其实这个轮播图高度只要求410px，写405px 是因为能继续增加一些属性，像其它需要丰满的时候可以用它，不管改成多少，它都会铺满，刷新一下。
轮播图在大屏，中屏，小屏超小屏中都是自适应的，这样轮播图就没有问题了。
接下来进行优化，需要把../images/slide_01 640x340. jpg'这样的一种加载，同时加载两张图片变成按需加载，要根据当前设备，属于哪一类设备，具体加载哪一类图片，比如是全屏的就应该加载大图，缩小就应该加载小图，按需加载，按当前设备加载，现在归分为四类设备，但是轮播图只有两种情况，一种移动端，一种非移动端，移动端和非移动端的临界点是多少？
或者怎么判断当前设备是非移动端还是移动端？移动端可以认为是超小型设备，它的区间是276。
判断好当前设备之后，根据自己的设备加载图片，怎么加载？
如果在大型设备里面的 a display，../image 这个数据会不会加载，这有个页面，页面上有个 a，a 是 display，里面有个 image，页面初始化的时候 image 会不会加载？
答案是会加载，因为在大屏设备里把 a 写入 display：none ，这个图片也会加载，这时候仅仅把 a 设成 display：none ，但是 src 还是存在的，还是会向后台发出请求下载图片，所以隐藏是没有作用的，是达不到这样的效果的。
比如在页面中按下 f12， 在network 可以看到加载的东西，这个是用来看当前页面到底会下载什么东西的，现在隐藏了某些图片，但刷新后 network 里这些图片还是被加载了，可以看到2000的这张也被加载了，所以在页面初始化的时候，不管是隐藏还是不隐藏都是会被加载的，所以 css 控制不了 image 的加载，js可以控制。方法是让
里面没有东西，让这两个都空，再让当前的屏幕动态的追加一张，追加 m_ imageBox 还是 pc_imageBox 是当前设备有关系的，js可以判断当前设备，可以按需渲染图片。
现在有四张图片，可能会出现三张图片，两张图片，五张图片六张图片的情况，因为可能有动态效果出现，所以要实现的功能是动态响应式轮播图，而且是为了做动态渲染，做优化而提出的这样一个东西。
在 index.js 中完成：
响应式要兼容pc端又要兼容移动端
输入$(function(){
/*动态的响应式轮播图*/
});
在入口函数之外声明一个 banner
var banner = function(){
之后在入口函数之后再调用
banner（）；
意思是页面文档加载之后执行 banner（）函数，因为它跟 windows 有一定的区别，windows 上是等页面上所有的资源包括图片，js 下载完成之后再进行执行，而这个只需要文档，页面上的字符渲染完解析完就可以了，不需要等其他东西加载出来。
完成动态响应轮播图需要，从动态出发，就要依赖于数据，动态的需要数据，不能写死，是从后台抓取来的，抓取之后渲染成轮播图。接下来要把轮播图里的东西抽象成一组数据，比如京东，
这是一个商品，需要哪些信息才能描述出来才能把 html 中展示出来，不可缺少的图片名称，价格以及原价，没有这些东西就构建不了 html 结构，后面就会发现渲染就是数据来驱动的，是跟数据息息相关的，页面最终是要绑定数据的。
把轮播图抽象成一组数据，需要图片地址，但是第一张轮播图有两种情况一种是pc 端的地址，一种是移动端的地址，所以需要两个数据，如果没有这两个数据就无法根据当前设备进行渲染。
所以在第一步就要准备数据，如果学了阿里云之后就从后台获取数据，模拟数据，一张图片里面有两个地址构成一个对象，有n张图片，多个对象就需要多张图片构成一个数组。
1.模拟数据（从后台回去数据）[{ }],[{ }] 数组包含着若干个对象
有了数据之后就需要把它转化成轮播图，而且要根据当前设备，所以就是判断当前设备
2.判断当前设备 768px
将数据根据当前设备转化车工轮播图，判断是移动端还是非移动端。
当设备是768px 以下都是移动端，这是根据设备分类来判断的，768px是临界点。
3.根据当前设备把数据转化成 html（渲染过程）
根据数据判断那些需要动态生成，点容器内容需要动态生成，图片容器内容需要动态生成，利用通过拼接字符串的方式转化，当把字符串拼接好之后。
4.渲染到页面当中 html 追加
添加或者追加到页面当中渲染到页面当中
哪些 html 需要动态的转化呢？哪些数据是动态的？或者哪些页面时活的？要根据数据来的？
点盒子要变成动态的，它要根据图片的数量对应的，比如有五张图，就有五个点，这里也需要动态渲染。所以3这里需要两步，点容器需要动态生成。
3.1点容器内容需要动态生成
Carousel-inner 也是需要动态，四个盒子代表四张图，五张图就要变成五个 div，既然都是动态的，这里面的a就可以变成动态，所以就可以根据设备，是选择把第一个a 拼进去，还是第二个a拼进去，是这样一个过程。
3.2图片容器内容需要动态生成
到4这步就完成了一个动态渲染。
把这些图都渲染完，怎么测试它在不同设备能正常显示呢？需要在页面尺寸发生改变的时候来看当前的轮播图能不能当前展示，所以需要测试。
5.测试能否响应 两种设备（移动端和非移动端） 监听页面尺寸改变重新渲染
把容器都动态渲染之后测试页面尺寸发生改变时，当前轮播图就需要重新渲染，就是根据实时根据当前页面的宽度重新渲染。
既然是响应式轮播图，就是要在移动端也能正常显示，就必须具备移动端手势切换功能。
6.移动端 手势切换功能 左滑 右滑
轮播图只需要左滑，右滑切换图片，这里是手势，并不是滑动，手势是整个操作过程而不是一直在滑动。
/*
*1.模拟数据(从后台回去数据)[{},{}]
*2.判断当前设备768px
*3.根据当前设备把数据转换成html拼接字符串
*3.1点容器内容需要动态生成
*3.2图片容器内容需要动态生成
4.渲染到页面当中ihtml 追加
*
* 5.测试能否响应两种设备 监听页面尺寸改变重新渲染
*
* 6.移动端 手势切换功能 左滑右滑
* */
这六个需求就已经分析完了，并且实现方式也分析完了，数据格式是字母，判断设备根据 768px，拼接字符串渲染设备，html 追加渲染到页面当中，监听页面尺寸改变重新渲染进行测试，通过左滑右滑手势进行移动端切换，从功能到需求到实现全部都分析一遍了。
