示例：
苹果风格的轮播
科技感十足的轮播
可能是最厉害的轮播组件
纯 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
网友评论