天天看点

jquery——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码

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——左右按钮点击切换一组图片功能一、最终效果二、功能分析三、代码

继续阅读