位置: 编程技术 - 正文
基于jquery实现左右按钮点击的图片切换效果(jquery左滑切换)
编辑：rootadmin推荐整理分享基于jquery实现左右按钮点击的图片切换效果(jquery左滑切换)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery从左到右渐渐显示,使用jquery实现的项目,jquery实现div左右移动,jquery left,jquery实现div左右移动,jquery怎么实现左右滑动,jquery实现div左右移动,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、完整代码
css部分：
标签: jquery左滑切换
本文链接地址:https://www.jiuchutong.com/biancheng/370501.html 转载请保留说明！上一篇：基于jquery步骤进度条源码分享(jquery基本操作)
