jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片。初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示。
效果图是最终效果有做响应式,但这不是重点,不做介绍。
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 #activity-slide是整个幻灯的入口,后面会将其作为参数来调用幻灯功能。
两个按钮ps_pre和ps_next将添加click事件响应点击切换功能。
因为左右切换都是三个为一组的切换,如果li总个数不是3的倍数时,需要增加li节点填满。
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 上面是判断得到需要追加的个数lisize,然后调用addlist追加。
addlist如下,从ul的第一个li开始复制,需要几个就复制出几个节点追加。节点追加完毕后重新计算ul的宽度。
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 现在准备工作已经完成了。接下来就是给按钮添加响应事件。在幻灯切换时涉及到左右按钮的显示和隐藏,所以先说这个按钮显示功能,将此分装成一个函数btnshow。
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 接下来幻灯切换。这里a是传入的参数,也就是 #activity-slide。给它下面的所以的pre和next添加响应。
向前一组,组数now减一,now是几,就让ul的margin-left为负几倍的组宽(即3倍的(li宽度+margin宽度)),然后显示对于按钮即可。
向后滑动一组li同理。
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 可能是jquery写的原因,加了浏览器缩放尺寸响应后点击切换按钮响应有延时。
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 完整代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码 css部分:
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码
jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码