JS+CSS实现带预览图幻灯片特效

开发方法：

VCD分析法：

• View: 视觉
• Controller：控制
• Data：数据

  View:页面结构分析

  
  
  

Data：数据分析

Controller：功能和行为分析

代码开发：

• 视觉界面开发：HTML+CSS、控制台调试
• 脚本开发：Javascript/Controller的实现
• 优化和扩展：更优雅的切换

脚本开发

案例总结：

1. CSS3样式：

   //设置元素过渡动画
   -webkit-transition:all 1s .8s;
   //设置元素倒影
   -webkit-box-reflect:below 0 -webkit-gradient(linear,left top left bottom,
        from(transparent),colorstop(50%,transparent),to(rgba(255,255,255,.3)))

2. Javascript

   tpl_main.replace(/{{index}}/g,i).replace(/{{css}}/,...)：字符串替换，replace可连续使用

案例下载：

在线视频：http://www.imooc.com/learn/412
源码下载：http://sandbox.runjs.cn/show/qditwqhe