`

用jquery开发幻灯片播放功能(完整版)

阅读更多

很久没有写了,今天写一个简单的效果,幻灯片无限滚动和大家一起交流学习
现在我自己写前端代码基本按下面的步骤:
1.看效果分析效果实现。
2.和美工确认各效果
3.写简单的html,这里特别说明一下,简单的html就是一个大概的结构,这样好切片。
4.根据第2步的确认和第3步html结构分析切图。(切图一般是我自己切这样根据代码的需要想切成什么样的图片都可以,自己好控制。)
5.编写html+css代码,实现效果图。(这里是关键的步骤,直接影响js编码,因为js操作DOM与直接的html编码有很大关系。而且使用html+css最大限度的还原psd,是对美工的尊重。)
6.编写javascript实现动态效果。
7.测试,修改
8.再次确认效果(如果与实际效果不同可能会返工 T_T,所以之前的沟通是非常重要的)。
9.完工

为说明方便,下面是一个简单的图片轮播的效果实现

0-sildePic效果分析
1-slidePic完成html代码
2-slidePic根据效果分析编写js代码-圆点功能
3-slidePic根据效果分析编写js代码-右箭头绑定
4-slidePic根据效果分析编写js代码-左箭头绑定
5-slidePic根据效果分析编写js代码-简单的整理代码
6-slidePic根据效果分析编写js代码-自动播放功能
7-slidePic根据效果分析编写js代码-完善自动播放功能
8-slidePic根据效果分析编写js代码-有两个同样的效果会怎么样?
9-slidePic根据效果分析编写js代码-函数式调用
10-slidePic根据效果分析编写js代码-函数式调用可配参数
11-slidePic根据效果分析编写js代码-html结构调整
12-slidePic根据效果分析编写js代码-js代码整理为.js文件
13-slidePic根据效果分析编写js代码-修改为jquery插件

附件下载:

1.原图下载

2.效果分析图下载

3.完整代码包下载

2
3
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics