29 jQuery 做个轮播

1. HTML、CSS、JS 内容、样式与行为分离
2. 轮播的思路
   1. 思路1：滚来滚去
   2. 思路2：用局部画面骗用户
3. 封装思路
   1. 从 API 开始思考
   2. 尽量能让使用者猜到

代码：

重构前：http://js.jirengu.com/rokebotizo/1/edit?html,js,output
重构后：http://js.jirengu.com/rokebotizo/2/edit?html,js,output

4. 作业讲解

• 全局变量不好用，最好不要用
• 尽量用局部变量
• 声明函数立即调用(局部变量) function(){}.call()
• 报错的解决方式 ( function(){}.call() ) , (function(){}).call()
• 或者前面加 - + ！ ~
• let作用域在代码块之间，不会提升到函数外部 var 会
• childNodes (子节点) 返回一个伪数组 特别记
• 碰到伪数组的length 要注意页面与内存的length不同
• arguments html获取的节点 列表都是伪数组

5.写轮播时出现的问题

css
display: flex //三张图依次排列
align-items: flex-start //图片按原尺寸显示

overflow : hidden //图片隐藏 要控制窗口的宽度与图片的宽度相同
transition ; transform 0.5s // 过渡时长

布局： flex float
jQuery 写css

$(x).on('xxxx',function(){
   $(xxxxx).css({
      transform : 'translate(xxxxxx)'
   })
})

属性有连接符是要加引号 'margin-left'

已知图片宽高写进去
js文件引入 放在body标签最下面