开发者学堂课程【移动 Web 前端开发：轮播图-动态响应轮播图-动态渲染 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8461
轮播图-动态响应轮播图-动态渲染
第一步在做以下这些之前，要先获取/*获取需要操作的元素*/
banner();
});
var banner = function(){
/*
*1.模拟数据(从后台回去数据) [{},{}]
* 2.判断当前设备 768px
* 3.根据当前设备把数据转换成html 拼接字符串
* 3.1点容器内容需要动态生成
* 3.2图片容器内容需要动态生成
* 4.渲染到页面当中 html.追加
* 5.测试能否响应两种设备 监听页面尺寸改变重新渲染
* 6.移动端手势切换功能 左滑右滑
* */
};
第一个想到的应该是轮播图，大容器，想拿到它，声明一个 $banner
切换到 index.html 页面，可以分为里面的 div 和外面的 div。
里面的 div 是一个完整的 banner。这是一个完整的轮播图。id= " carousel- example- generic' class="carousel slide data-ride= " carouse">
外面的 banner 也可以，外面只是一个容器包裹住它。
不找外面的，只找里面的 carousel。代码如下：
/*轮播图组件*/
var $banner = $(' .carousel' );
点容器和图片容器需要动态渲染，$只是分明 carousel 的对象，没有其他用处。
/*点容器*/
这时要在 index.html 页面往里找，找到 carousel-indicators 点容器。
var $point = $banner.find( '.carousel-indicators');
/*图片容器*/
找到图片容器进行渲染，在 index.html 页面找到 carouse1-inner。
var $image = $banner.find( '.carouse1-inner" )
要获取到当前对象的宽度，要获取到 windows 对象。
/*窗口对象*/
var $window= $(window) ;
拿它的目的是要获取当前浏览器的宽度，当前窗口的宽度。
完成以上是第一步需求
/*模拟数据（从后台回去数据）[{},{}]*/
宿主中包含对象，对象中包含两组图片，根据当前设备选择使用哪种图片。
var data = [
{
pcSrc: " images/slide_o1_200ox410.jpg , pc 端的图片地址可以从 index.html 页面直接复制
mSrc : " images/slide_o1_640x340.jpg' m 的图片地址可以从 index.html 页面直接复制
}，
]
现在有四张图，现在先按之前的来，后面也可以多加一张进行动态渲染，所以再复制三份写入：
{
pcSrc: " images/slide_o1_200ox410.jpg ,
mSrc : " images/slide_o1_640x340.jpg'
}，
{
pcSrc: " images/slide_o1_200ox410.jpg ,
mSrc : " images/slide_o1_640x340.jpg'
}，
{
pcSrc: " images/slide_o1_200ox410.jpg ,
mSrc : " images/slide_o1_640x340.jpg'
}
这组数据的抽象过程。有四张图，每一张图有两种图片，按照当前设备使用哪一张图片。
第二步，判断当前设备转化成 html 然后再让html 渲染到页面当中
* 2.判断当前设备 768px
* 3.根据当前设备把数据转换成 html 拼接字符串
* 3.1点容器内容需要动态生成
* 3.2图片容器内容需要动态生成
* 4.渲染到页面当中 html.追加
整个2.3.4这过程统一可以认为是一个渲染过程，因为渲染要根据设备，根据设备转化到页面当中，整个就是一个渲染流程，就可以统一认为渲染操作。
/*渲染操作*/
var render = function(){ 定一个渲染方法，在这个方法当中完成这个渲染。
要判断当前设备，要获取当前设备的宽度，当前设备的宽度已经拿到 window 了。
/* 2.判断当前设备 768px* /
拿到当前宽度如果大于或者如果小于768，那么 true，否则 false。
var isMobile = $window.width() < 768 ? true : false;
如果获取到的宽度小于768，那么就是移动端，否则不是。判断好了当前设备。
/*根据当前设备把数据转换成 html 拼接字符串*/
/*3.1点容器内容需要动态生成*/ 根据data进行生成
var pointHtml =‘ ‘；
/*3.2图片容器内容需要动态生成*/
var imageHtml =‘ ‘；
/*根据数据来拼接*/ 现在数据是一个数组，需要去建立，变量data，之后会有回调，回调函数当中对应的是i，item，或者是k，v，这里可以随便来更改变量，变量之后要把每一组数据拼接，按照原本已经是静态的代码，如果要拼接点容器里面的内容，点容器内容代码如下：
data-slide-to="0" class="active">
根据这一条内容认为是一个小模版，参照这个小模版变量。
$.each(data,function(k,v){
pointHtml +=
to="e”" class="active">
这里的内容需要变为动态的，所以在 data-slide-to= 后加 ‘+k+‘ ，k是当前图片的索引，还有一个地方需要索引，只有一个元素才有 active。
data-slide-to="e" class="active">
这一段代码只有第一个元素有 active，其它元素没有，这个地方要有逻辑判断，这里要根据当前索引进行拼接，如果当前k==0，那么就可以追加一个 class="active ，否则就是空，这样就达到了想要的效果，索引要动态生成，active 要动态控制。
Console.log（pointhtml）输出一下，但现在声明的方法没有调用，所以在下方调用一下：
Render（）；
在页面控制台找到 console 刷新页面，没有打印出来，在 index.html 中引入：
这时打印出来：
=“#rcarousel-excample-generic"
data-slide-to=0" class= *actve">
data-slide-to"2”>
第一句代码有 active
第二句代码没有 active
第三句代码没有 active
没有问题这样就完成了点内容的拼接。
把这段代码带入到 pointhtml 盒子里面就可以了，这样就完成了动态拼接，动态生成。
/*点内容的拼接*/
pointHtml +='
'+（
/*图片内容的拼接*/ 在 index.html 中找到模版，代码长一句一句加，先加开头的标签，再加结束的标签，中间再加 a，但是有两个 a，所以要选择性的加进去，根据当前设备选择，但是其实 div 也有一个地方需要动态渲染，是 active，只有第一个 div 才有，所以在这里需要拼接一次。如果 k=0，就追加 active，否则为空。
根据当前设备需要选择渲染哪一张图片。
imageHtml += '
‘)+ ‘ ">;
/*按需追加图片*/
if(isMobile){
imageHtml += ‘’；
}else{
imageHtml +=‘</div>’;
在 index.html 中复制两个a在这个位置，都是静态的，里面的内容需要替换掉，地址需要换成动态的，再看使用的响应式内容，hideen-lg hidden-md hidden-sm 将响应式工具去掉，因为已经是第二次判断当前设备，所以没有用，当是移动端时，image 要变成动态的，后面的 alt 可要也可无，删掉，现在应该是第一张图片中移动端图片，现在第一张图片用 v 代表，v 里面包含两张图，一张 pcsrc，msrc，因为是 data，所以要拿到 v.msrc。
imageHtml +=‘
src=""+(v.mSrc)+'”/>'; ’；
移动端的动态图就渲染好了。
pc 端的动态图也需要渲染，把 images/slide 01 2000x410. jpg) 去掉，+v.pcSrc+，href=# 是 a 的链接。
imageHtml+=‘helf+“#
style="background-image: ur1( '+v.pcSrc+');"> ';
}
imageHtml += '
' ;
拼接完之后
console. log(imageHtml);
保存打印，当前是非移动屏幕，渲染大图，打印了两句代码，第一个
有 active，第二个代码没有 active。
在 index.html 页面中粘贴看到 p c_imagebox，加载的是大图，没问题后拿掉，pc渲染没问题。
切换到移动端看一下，把之前的删掉再进行刷新页面，又会初始化一边，可以再看一下这个图，把它复制粘贴在 index.html 页面，格式化一下，第一个 active，其他没有，现在加的是 m_imagebox，里面是640的图片，没有问题。动态拼接好字符串了。
可以把以下代码删掉：
=“#rcarousel-excample-generic"
data-slide-to=0" class= *actve">
data-slide-to"2”>
pc_imagebox 和 m_imagebox 的代码也可以删掉。
既然可以打印出来，就可以用了，渲染到页面当中 html 追加：
$point.html(pointHtml);.
$image.html (imageHtml);
这样就完成了渲染。已经提前把容器拿到了。
放到移动端刷新。
在页面中刷新，轮播图不动将图片轮播更改顺序：
{
pcSrc: " images/slide_o1_200ox410.jpg ,
mSrc : " images/slide_o1_640x340.jpg'
}
{
pcSrc: " images/slide_o2_200ox410.jpg ,
mSrc : " images/slide_o2_640x340.jpg'
}
{
pcSrc: " images/slide_o3_200ox410.jpg ,
mSrc : " images/slide_o3_640x340.jpg'
}
{
pcSrc: " images/slide_o4_200ox410.jpg ,
mSrc : " images/slide_o4_640x340.jpg'
}
这时候轮播图就开始切换了。
第一张图：
第二张图：
第三张图：
第四张图：
这就是动态渲染过程。渲染操作2.3.4就好了，这时候页面上的点靠得太近，字符串没有空格，只需要加上空格：
\n‘
刷新即可看到页面上的点已经被隔开。\n 是转译符，转译空格的意思。
到现在轮播图的动态渲染就成功了，但是还差两步，一个是测试，一个是移动端滑动。
