开发者学堂课程【移动 Web 前端开发：轮播图-动态响应轮播图-测试&移动端切换】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8462
轮播图-动态响应轮播图-测试&移动端切换
目录
一、监听页面尺寸改变重新渲染的操作示例
二、移动端创建手势切换操作示例
一、监听页面尺寸改变重新渲染的操作示例
/*测试能否响应 两种设备 监听页面尺寸改变重新渲染*/
打开界面，并刷新界面，界面展示在 pc 端没有任何问题，但当移动到移动端的尺寸的时候页面中的内容没有自动发生自适应变化，如果再次刷新，页面就进行了自适应的变化，这是因为页面根据当前的设备进行了一次渲染的操作。
//为了方便测试，需要完成此功能：在页面尺寸发生改变的时候，系统需要去判断当前处于哪种设备，再进行重新渲染的操作。
//监听尺寸发生改变：
问题：window 在发生变化的时候，如何才能监听到页面的尺寸发生改变，并进行渲染的操作？
操作及代码示例：
$window.on( " resize' ,function(){ //需要绑定事件“resize”，添加一个 function 函数
console.log($window.width(); //页面在发生改变时，可以打印当前window 的实时宽度
//在获取到实时宽度后，需要判断是否在移动端在根据数据去重新渲染 html 代码。
又回到如下操作：
*1.判断当前设备
*2.根据当前设备把数据转换成 html 拼接字符串
*3.1.点容器内容需要动态生成
*3.2.图片容器内容需要动态生成
*4.渲染到页面当中 html 追加 //此操作已经被放置到 rander 渲染操作中
//可以直接调用 rander 函数进行操作
rander（）;
})
//再次拖拽边框页面，发现页面可以被渲染并进行自适应的改变，完整的完成测试
操作编写成功后，进行刷新操作，发现页面中什么内容都没有，页面尺寸改变就会打印，这时候拉取控制台将页面尺寸进行改变，打印的宽度一直都会保持在1248这个值。拉取右边边框，改变宽度，可以实时的获取当前页面的尺寸。
//可以根据页面的宽度渲染轮播图，目的是为了能够进行测试。
//在初始化页面的时候，很少会有改变页面尺寸的情况，特别是在移动端。在改变移动端的屏幕大小时，无法改变移动端如手机这种移动设备的屏幕大小。在pc端，才可以进行改变屏幕大小的操作，且操作大部分是开发人员在进行这部分操作，正常用户很少会进行改变屏幕大小的操作。
//此操作只是为了进行测试，不考虑性能问题
//如果考虑性能的问题，页面的尺寸在不停地在进行改变和渲染，则会非常消耗性能
写入：
.trigger（‘resize’）； /*trigger 主动触发 resize 事件 执行 render 进行页面初始化*/ //主动除法 resize 时间，已经调用了 render
//加入 trigger 后，页面初始化的时候，已经被渲染完毕。
//加入此方法后依然可以实现刷新页面进行渲染，页面自适应改变的操作
例子：
比如：$(window) .on( 'click " ,function(){ console.log( " click ' ) }); //打印 click
给 window 绑定一个 click 事件，这时候点击任何地方都能打印 click，接下来$(window) .on( 'click‘)；
和上方一样，先绑定了一个 click，通过 window 调用 trigger 传入了 click，当敲击时，相当于主动触发了一次 click 事件，意味着通过 js.trigger 函数触发了事件。
//trigger 函数中包含的是所需要触发的事件
二、移动端创建手势切换操作示例
/*移动端 手势切换 左滑 右滑*/
//以前在分析手势切换操作时，都是使用 touch 方法，使用原生的绑定方式来进行绑定。
/*通过 jquery 可以绑定 touch 事件*/
$banner.on( "touchstart " ,function(){ //绑定轮播图组件
//绑定事件 touchstart
//轮播图中有许多的图片和许多的内容，需要给容器进行手势的绑定
console.log( 'o'); //打印
}）
注意：既然能绑定 touch 其他的也能绑定：
.on( "touchmove " ,function(){
console.log( '1') ;
}）.on( 'touchend" ,function(){
console.log( '2' );
}）
如果要完成一个手势，则需要记录开始的点，离开的时候的点，两点之间的距离来做一个判断，如果移动距离超过了多少就认为是手势，并且一定是滑动状，其他的就不会被认为是手势。
var startx = 0; //记录初始化的点
$banner.on( ' touchstart " ,function(e){
startx = e.touches[o].clientx; //获取点
刷新之后，不能读取到这个属性，先把 even 打印出来，看一下里面有没有 touchstart
console. log(e);
打开 even 对象里面没有 touches
注意：在 even 对象当中没有触摸点集合。
Even 对象里有 originalEvent: TouchEvent，原生对象，其实就是 touchstart 返回的原生 even 对象。 //原生对象返回的 even 的类型就是 TouchEven
注意：originalEvent 当中才有触摸点集台。 //original：原始的、原生的
//如果需要取值到 touchers 中的对象，需要先找到 originalEavent，再找到touches 中的 clicktx
所以：
var startx = 0;
$banner.on( ' touchstart " ,function(e) {
startx = e.originalEvent.touches[o].clientx;
console.log(startx); //打印 startx
//证明开始的坐标轴记录没有问题
}）
在 touchmove 处进行数据记录操作：
var startx = o;
var distancex= o；
var isMove = false;
在 touchmove 里：
var movex = e.originalEvent.touches[o].clientx;
distancex = movex - startx;
isMove = true;
结束操作的时候应该把操作重置，防止第二次滑动造成影响：
startx = 0;
distancex= 0；
isMove = false;
//当操作完成后需要进行全部重置
/*手势的条件*/
*1.滑动过的
*2.移动的距离超过 50px 认为是手势
if( isMove.&& Math.abs(distancex) >= 50){ //定义满足手势事件的条件
判断左滑，右滑
if(distancex > 0){
/*右滑 图片为上一张*/
console. log( " prev") //打印图片
//需要切换轮播图
}else{
/*左滑 图片为下一张*/
console. log( " next")
对页面进行操作，显示如下效果：
切换轮播图
//现在切换时是 bootstrap 实现的轮播图，既然能实现轮播图，也能提供一些 API 来动态调用切换，切换上一张图片或者是下一张图片。
//现在使用的是 javascript 插件，通过参数配置或者 API 的配置可以达到某种功能。
找到 carousel 的轮播图，现在只是仅仅使用了示例源代码，在下方可以找到 options 参数：
1.interval 每隔5秒转一次
2.pause 什么时候让轮播图停止，鼠标经过的时候让轮播图停止。
3.wrap 默认是停止还是循环的状态，让容器自动循环还是停止。
4.keyboard 是否可以让键盘控制轮播图，默认是可以控制的。
//当点击页面图时键盘能否控制左右轮换
第一种方法：
data-ride="carousel" data-interval”1000”>
直接添加属性，通过 carousel 配置使页面上的轮播图一秒轮播
第二种方法：通过 js 初始化：
找到轮播图，给轮播图调用 carousel 方法进行配置当前轮播图多少秒转一次。
写入：
$( " .carousel" ).carousel({
interval: 2000
//通过控制台也可以进行执行此方法
//此方法也可以初始化默认
第三种方法：
直接传入字符串进去
右滑：
$banner.carousel( ' prev' );
左滑：
$banner.carousel( ' next' );
//获取到banner，就可以调用 banner 的组件方法进行轮播操作实现
//通过调用组件方法实现。
在使用 js 组件的时候，需要实现某些功能时，最好去参考一下说明文档。
