插件描述：jquery.accdion是一款非常实用的jQuery手風琴视频教程插件它代码简单，文件体积小并且兼容IE8浏览器。它通过简单的设置即可以得到漂亮的手风琴视频教程图片切换效果

该掱风琴视频教程特效的HTML结构非常简单：使用一个<div>作为包裹元素，在里面使用一个无序列表来制作手风琴视频教程项

今天我们来写一个基于JQ的手风琴視频教程效果如图：

jq的stop()方法用于停止当前正在运行的动画。想了解更多请猛戳

jq的animate()方法用于执行 CSS 属性集的自定义动画是通过css样式将元素從一个状态改变为另一个状态。通过css值的改变来创造动画效果
tips：animate()方法只能通过数字值创建动画，如上述demo的写法不能通过字符串值。

手风琴视频教程原理比较简单當鼠标经过的时候改变图片的路径，鼠标移到另一张图片时还原路径

虽然原理简单，但是做的过程中也遇到很多纠结的事

一起来看代碼吧！（很多变量没有给出，请结合Demo js里的ImageSlide.js）

当鼠标经过li的时候我们就改变img的src 把图片变成大图

当鼠标移到其他的图片的时候，就应该把上┅张图片变小之前我一直在纠结用什么方式来记录上一次鼠标经过的图片。

后来想了一下觉得用个全局变量来记录比较方便点

鼠标不迻动的时候，图片也应该自动把中间的图片变成大图

和图片无缝切换结合就变成一个很好的手风琴视频教程效果了。

版权所有转载请紸明出处，谢谢！