艺灵设计

全部文章
×

淘宝百变轮播特效代码生成器帮助文档

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-09-05 10:51:09 - 阅: - 评:0 - 积分:0

前天发布了第七款生成器《聚光轮播》,今天来发布下第八款生成器→→《淘宝百变轮播特效代码生成器》的帮助文档。下面先来上一张生成器界面截图:
百变轮播

先来对此款神器做下点评:
优点:1.完全自定义变形,宫格轮播,缩略图轮播都可一键生成!无论大图还是小图还是箭头都支持拖拽,也就意味着可以拼成自己想要的轮播图案。而操作只需要鼠标按住拖拽即可,同时提供位置输入框,可输入具体数值来精准对齐;
2.可实现全屏轮播功能;
3.可给不同的图片设置不同的颜色边框,色彩多样化;
缺点:动手能力超强,小白谨慎使用!
使用难度:  动手能力:超强

好了,下面进入对上图各数字的功能进行讲解时间:
1.框架宽/高度:如果想全屏,请调整宽度为1920,高度适自己情况而定。这里外框架会有背景色,背景色的目的是便于用户对齐位置。
2.大图宽/高度:由于这里是个宫格的轮播布局,大图指的是左侧的大图。如果想要改变大图的位置,可以拖拽或者在此修改数值。
3.动画效果:默认是1.水平滚动,提供4种动画效果设置,可通过下拉选择。
4.动画方式:默认是默认是2.快→慢2,提供13种设置,可通过下拉选择。
5.店铺类型:默认C店专业版(950),天猫店铺请选择B店;生成的代码安装时一定要安装到对应的店铺类型以及对应尺寸的模块中,否则不会居中或全屏!举例:选中“C店基础版(左190)”,则生成的代码安装到淘宝C店基础版左侧宽为190px的模块中;
6.动画时长:默认是0.3s,轮播图片切换的时间,这里提供[0.1,2.0]s共20个值供亲选择。
7.延迟时间:默认是0.6s,延迟多少秒后才播放动画,这里提供[0.1,2.0]s共20个值供亲选择。
8.触发点:默认是显示,选择否后目标列表(即:小图)不会显示。
9.翻页按钮:默认是显示,选择否后箭头不会显示。
10.链接选项:默认保留链接,选择取消后会清除轮播中的所有链接。
11.链接类型:默认新窗口打开链接。
12.触发方式:默认是滑过,官方只提供“滑过”与“点击”两种触发状态。
13.自动播放:默认是是,设置成是后会自动播放。
14.左右箭头:请务必更换自己空间的箭头图片链接,否则在店铺中会被过滤!鼠标按住可拖拽位置,也可在对应的上和左输入框中精准调位置,也可设置大小。
15.图片链接与宝贝链接:请务必更换自己空间的图片链接。最右侧的橙黄色图标是当前图片的标识号。
16.宽/高/上/左:分别指小图的宽,高,居上和居左的位置。
17.边框色:图片边框的颜色,可点击后从颜色库中选取。不同序号的图片可以制作不同颜色的边框。
18.增加按钮:点击一次即可成功添加一张图片,右侧会显示添加的标识号,然后再修改图片以及链接即可,最多可添加30张图片。
19.删除按钮:点击一次即可成功删除一张图片。
20.生成代码:点击后即可生成代码,再复制左侧的文本域中的内容到自己店铺中,保存发布即可。
21.生成代码区:这里为最终生成的代码,可直接复制到店铺中应用。注意:每次修改上面参数后必须要重新生成新代码!
html内容操作步骤
22.成品效果:点击可以在新页面预览最终的效果;这里说明一下,由于“店铺类型”的缘故,当您选择了【C店基础版(左190)】或【C店基础版(左750)】或【C店基础版(右750)】后,此页面的效果图会整体偏移,这是正常现象,粘贴进店铺时请务必安装到对应的模块中,否则不会全屏/居中。
23.帮助文档:点击后会跳转到这篇《淘宝百变轮播特效代码生成器帮助文档》文章。
24.即时效果区:修改下面的内容上面会改变,便于观察效果,最终效果请点击“成品效果”后浏览;

好了,大致上讲完了。不过这个灵活度极高,来附几组轮播布局效果图吧。
百变轮播变形布局图
明日发布此生成器地址,敬请期待。

2014.09.06 11:45更新

应用地址:http://www.yilingsj.com/zxsc/lbtx/2014-09-06/203.html

最后,亲们在使用中如有任何疑问,均可在评论区中提交问题(严禁回复无意义内容);或者点击导航上面的qq头像直接进群(请使用自己的大号,小号有不良记录的审核不会通过!)请教;或者将问题发我qq邮箱:315800015@qq.com。同时,如果亲在使用中发现生成器有bug,还请亲能慷慨指出,提前谢过!

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2014-09-05/202.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 淘宝百变轮播特效 特效代码生成器 淘宝店铺装修 B/C店装修 全屏轮播特效 宫格轮播特效 选项卡轮播

上一篇: 鼠标滑过n种特效代码生成器帮助文档   下一篇: 淘宝定位布局辅助工具帮助文档

评论区