``` 原生版轮播图（面对对象）一、代码分两个部分： 1、HTML部分，根据注释处理即可； 2、play.js插件部分，这里为了展示效果，直接写在下的标签里。 3、效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。 4、这里可以预览效果。二、轮播图原理说明：（1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后，（2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；（3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推（4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意（5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。三、使用时，id="boxQC"，这个id不能改动；"可增减区域"里的div可增可减；new Banner('1000px', '500px')，这里的参数可以变化。写法一： ```html:run

``` 写法二： ```html:run

``` 用CSS3实现轮播效果，轮播的触发条件是将鼠标放在轮播区上。 ```html:run Title

``` jQuery版轮播图一、代码分两个部分：1、HTML部分，根据注释处理即可；2、基于jQuery的play.js插件部分，这里为了展示效果，直接写在下的标签里。3、效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。二、轮播图原理说明：（1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后，（2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；（3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推（4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意（5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。三、也可以用命名空间的方式进行扩展： ```html:run

``` ```