task30 用jQuery做个轮播吧

示例：
苹果风格的轮播
科技感十足的轮播
可能是最厉害的轮播组件
纯 CSS 轮播

走马灯代码地址
走马灯预览地址
思考静态图片如何实现动态的马在跑的效果？

轮播的思路

思路1：滚来滚去
思路2：用局部画面骗用户

轮播的思路.png
image.png

.window是可视区域，
.images里面的图片横着放，使用flex布局
使用transform:translateX(-300px)实现可视区域的图片切换
使用 transition:transform 0.5s 实现过渡效果
但是在图片切换过程中会有抖动出现

image.png
transform改成margin-left就可以了
是页面放大了才会有抖动，改成100%就没问题了

• 优化1-不要写重复的代码 不写重复代码.png
• 优化2-实现自动播放 自动播放.png
• 用jq链式操作，给当前点击的add('red')，兄弟结点中有red类的removeClass('red') jq链式操作.png
• 优化3-一直轮播？怎么实现鼠标hover的时候轮播停了，鼠标离开继续轮播？？？⬇️ image.png
• 优化4-代码优化，重复代码封装成函数⬇️ 代码优化

封装思路

从 API 开始思考
尽量能让使用者猜到
老师的实现：
重构前：http://js.jirengu.com/rokebotizo/1/edit?html,js,output
重构后：http://js.jirengu.com/rokebotizo/2/edit?html,js,output

我的实现
代码地址
预览地址