用JavaScript 代码来做，图片切换效果！

用原生的JS写动画效果的确是个很令人纠结的事情，倒不如直接用jQuery来写，亦或找一些jQuery插件。能力达不到的时候，为了工作进度，只能采取心有不甘的手段。

如果真的获得能力的提高，我认为还是必须去学习那些优秀的程序员写的优秀的代码。图片切换并不是很难，只不过要获得一些动画效果有些费力，由于本人数学不好，加之不努力，所以做起动画来很吃力。

动画切换要结合JS和CSS达到想要的效果。图片切换一般涉及的CSS的定位，以及JS定时器的知识。定位方式一般定时变换幻灯片的left或者 top属性，实现图片移动。还有一种是设置幻灯片的父容器的scrollTop或者scrollLeft属性。这里用的是定位方式。

首先HTML结构遵循一定的规律，至于为什么，下面会提到。

外部包裹的div是一个容器，用来包裹图片容器和切换容器。外部的大div和图片容器宽度和高度定死，overflow属性设置为hidden，防止图片溢出容器。

下面介绍JS代码如何实现幻灯效果。

首先创建Slider对象，在JS中函数就是对象。该对象接受两个属性，一个是外层容器的ID属性值，另一个是配置参数。

以上获得图片及切换容器对象，以及设置默认配置参数。当页面水平滚动的时候，需要注意的是，必须计算出所有图片的宽度和，并将这个值赋给图片容器，并将所有的图片外的li元素的float属性设置为left，否则，图片不会在同一行，并且会折行，从而失去水平滚动想要的效果。

事件绑定的时候，个人感觉比较重要的是move方法。在这个方法中会调用到getStep方法，从而获得一个渐进量，这对实现动画效果是十分重要的。

getStep方法接收两个参数，一个是目标值，另一个是当前值。例如，目标值是left=-400，当前值为0，那么在从0到-400这段运动的距离中，如果没有达到目标值，通过不断地调用getStep方法，获得不同的渐进量。getStep方法参考了cloudgamer的。

至于其他有什么忽略之处，欢迎指正。