任何任务到手之后，我们需要做的不是马上开工，
而应该静下心思考，拆分细化，找到难点，逐个突破。
以这个“响应式半透明胶片轮播”为例，它实际包含了以下子任务：
1、[样式]胶片变形。
解决：3D 变形（perspective + transform）
影响：最低需 ie10 → 客户接受低版本不变形。
2、[样式]胶片两侧逐渐透明。
难点：CSS 中渐变工具极其有限，一般仅用在 background 上。
解决：元素本身无法渐变，那就要转变思路。
既然只有胶片的头和尾才进行渐变，
考虑使用与背景相同而本身渐变的图片覆盖之。
影响：两侧遮罩无法很好地在响应式背景上左右定位。
3、[样式]胶片两侧遮罩定位。
难点：背景使用了 background-size:cover，以达到随容器宽度自动居中。
因此两侧遮罩无法通过 position:absolute 或者 float:right 来定位。
解决：要使背景与遮罩精确对齐，就必须再一次转变思路。
考虑使用与背景相同大小，中间透明两侧渐变的图片作为遮盖。
影响：半透明的 png 文件体积大 → 接受；
中间胶片主体部分无法交互。
4、[样式]遮罩点击穿透。
解决：利用 point-events:none 使遮罩不再阻挡其下层胶片的交互。
问题：最低需 ie11 → 自动轮播/客户增加控制按钮。
5、[交互]轮播本身。
解决：显示或每次移动多个元素的场合，jQuery Scrollbox 是个不错的解决。
影响：该插件的回调过于简单，不便于详情切换的交互。
6、[交互]详情切换。
解决：观察 jQuery Scrollbox 的轮播时的 DOM 操作，
实际上是将队列首个元素移动至队列尾部。
因此我们只需在轮播动作结束时，激活固定序列号（4/8）即可。
悬停时，停止轮播，并激活对应序列号。
7、[样式]移动版。
解决：不再变形胶片，并仅居中显示一张及其详情。
因为代码较为复杂，不再一一展示，
可以在项目预览中查看完整页面。
