例子是基于JQ实现的轮播图实例,初学者可以参考一下!
工具/原料
1
4张200*200的jpg图片
2
Eeitplus 3开发工具
方法/步骤
1
新建“工程”文件,在工程文件夹内创建“images'文件夹(保存4涨图片);
2
通过EditPlus 3新建HTML网页,命名为“Document”;
3
创建3D划桨式图片切换特效的6个面,分别以上下左右前后表示;
4
设置6各面的宽高及线条;
5
构建3D立方体,第一步设置6各面的位置;
6
第二步通过JS动画旋转实现3D立方体效果;
7
最后旋转并插入4面的图片,实现3D划桨式图片切换特效;
注意事项
1
最后一步为整个动画特效的全部代码;
2
如有错误使用F12 开发者工具进行调试。
3
编写代码时,要特别注意在英文状态下编写符号。
4
每一步划红线的为与上一步不同的地方
上一篇:墨刀怎样添加并编辑页面轮播图
下一篇:怎样用js插入多张图片的页面中