基于jquery实现左右按钮点击的图片切换效果_jquery

来源：年旅网

jQuery可以制作出与Flash媲美的动画效果，这点绝对毋庸置疑，本文将通过实例演示一个左右按钮点击的图片切换效果。

一、最终效果

二、功能分析
1、需求分析
点击左边pre按钮，显示前面三个图片，点击右边的next按钮，显示后面的一组（三个）图片。初始化只显示next按钮，到最后一组只显示pre按钮，中间过程两按钮都显示。
2、html结构分析

#activity-slide是整个幻灯的入口，后面会将其作为参数来调用幻灯功能。

两个按钮ps_pre和ps_next将添加click事件响应点击切换功能。

3、功能分析
因为左右切换都是三个为一组的切换，如果li总个数不是3的倍数时，需要增加li节点填满。

上面是判断得到需要追加的个数lisize，然后调用addlist追加。

addlist如下，从ul的第一个li开始复制，需要几个就复制出几个节点追加。节点追加完毕后重新计算ul的宽度。

现在准备工作已经完成了。接下来就是给按钮添加响应事件。在幻灯切换时涉及到左右按钮的显示和隐藏，所以先说这个按钮显示功能，将此分装成一个函数btnshow。

接下来幻灯切换。这里a是传入的参数，也就是 #activity-slide。给它下面的所以的pre和next添加响应。

向前一组，组数now减一，now是几，就让ul的margin-left为负几倍的组宽（即3倍的（li宽度+margin宽度）），然后显示对于按钮即可。

向后滑动一组li同理。

三、实例代码
1、用到图片

2、完整代码