很久没有写了,今天写一个简单的效果,幻灯片无限滚动和大家一起交流学习
现在我自己写前端代码基本按下面的步骤:
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.完整代码包下载
相关推荐
jquery 图片幻灯片播放多个组件 图片幻灯片播放多个组件
Jquery触屏幻灯片,自己写的附有js和css源代码。下载后可自行修改。
jQuery手机幻灯片切换放大 jQuery手机幻灯片切换放大 jQuery手机幻灯片切换放大
jquery 幻灯片 大全jquery 幻灯片 大全
Jquery图片幻灯片展示,可以自动播放,鼠标放上去也会切换图片
jquery新闻幻灯片展示(多种)
jPlayer是一款播放音乐的jQuery插件。这款jquery幻灯片插件将jPlayer和幻灯片功能结合到了一起。幻灯片中带有小缩略图,当音乐播放完毕整个幻灯片播放完毕。
JQuery实现的功能最强大的幻灯片相册
最简单的jquery图片幻灯片 自动图片轮播,不显示其他任何额外东西
jquery 3d幻灯片效果免费下载.zipjquery特效下载,jquery特效大全
一款jquery全屏幻灯片插件,带自动播放功能,还可以暂停播放,最大特点是页面能够过渡的十分平滑。
jquery图像幻灯片上下滑动图片切换
jquery特效html中的幻灯片播放
图片幻灯片 js图片切换 图片切换特效 漂亮的图片切换效果
jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览
jquery手机幻灯片展示
jquery特效 幻灯片 简单幻灯片 jquery特效 幻灯片 简单幻灯片
jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换
jQuery嵌套幻灯片 jQuery嵌套幻灯片代码下载.zip
flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果:爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。