仿淘宝首屏轮播特效 --艺灵设计

仿淘宝首屏轮播特效

ps:淘宝基础版、专业版、天猫店铺通用！

小提示

ps:只对核心点做出提示

素材来源

本特效用到的素材来自马尔杜克，店铺地址：https://mduk.taobao.com。

带背景的小圆点怎么实现？

点击【目标列表】--切换【目标特效】为“2.圆点2”即可。
通用说明图：图解-目标特效

相关工具

目前可制作该特效的首选工具有：

视频教程

ps:建议看官观看完视频后再操作，以免在操作过程中不知道一些术语表达的是什么意思。

暂时没空录制

模板代码

ps:使用下面的代码可快速恢复上面的特效哦！→→戳我编辑此特效

{"def":{"wid":"779","hei":"450","xbj":10,"hua":1200,"css":"","dii":[0,5,"0,1,2,3,4,5,",6,1,"","","tb","",null,null,0],"dsi":{"pjcs":1},"wgx":1,"she":"0","qpk":1,"gns":1,"tzg":0,"stt":0,"xht":1,"ltt":0,"fdg":1,"gjg":0,"dpm":1,"ncs":{"Ljt":{"v":0,"t":""}}},"tpz":[{"dii":0,"dnu":100000,"def":{"wid":799,"hei":450,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i1/759415648/TB2yoU2tt4opuFjSZFLXXX8mXXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"779","hei":"450","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"779","dhe":"450","top":0,"lef":0},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}},{"dii":1,"dnu":10001,"def":{"wid":799,"hei":450,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i1/759415648/TB2bvUrtt0opuFjSZFxXXaDNVXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"779","hei":"450","mat":0,"mar":"auto","mab":0,"mal":0},"Dfe":{"dnu":100000},"Dus":{"dwi":"779","dhe":"450","top":450,"lef":0},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}},{"dii":2,"dnu":10002,"def":{"wid":799,"hei":450,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i4/759415648/TB2x4E3txlmpuFjSZPfXXc9iXXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"779","hei":"450","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"779","dhe":"450","top":450,"lef":0},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}},{"dii":3,"dnu":10003,"def":{"wid":799,"hei":450,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i3/759415648/TB2OigttxxmpuFjSZFNXXXrRXXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"779","hei":"450","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"779","dhe":"450","top":900,"lef":0},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}},{"dii":4,"dnu":10004,"def":{"wid":799,"hei":450,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i4/759415648/TB2IW8zqrRkpuFjSspmXXc.9XXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"779","hei":"450","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"779","dhe":"450","top":1350,"lef":0},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}},{"dii":5,"dnu":10005,"def":{"wid":799,"hei":450,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i4/759415648/TB2towJqmhlpuFjSspkXXa1ApXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"779","hei":"450","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"779","dhe":"450","top":1800,"lef":0},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}}],"dgn":{"0":{"dii":0,"dnu":100000,"def":{"pfs":0,"pfi":0,"npf":1,"wid":"779","hei":"450","mat":0,"mar":0,"mab":0,"mal":"auto","pat":0,"par":0,"pab":0,"pal":0,"dcz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"num":1,"xqy":0,"chh":0,"di2":0},"Tlb":{"cfg":{"dur":"1","del":0,"eff":"scrollx","eas":"easeOutStrong","aut":"true","btn":"true","has":"true","cir":"true","tri":"mouse","act":0,"aCl":"hidden","vie":"","ste":1,"shu":"","cou":"false","cos":""},"btn":{"Dus":{"btx":0,"opa":0.6,"roa":0,"tim":"cubic-bezier(0.3,1.5,0.7,1)","tii":0,"ti0":0.3,"ti1":1.5,"ti2":0.7,"ti3":1,"dur":0.3,"lay":0,"trX":1000,"trY":0,"scx":1.1,"scy":1.1},"cfg":{"fwi":"1","wid":60,"hei":60},"fye":[{"def":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i4/759415648/TB215zuXPHz11Bjy0FpXXcNiVXa-759415648.png"},"hov":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i3/759415648/TB2UMp3oYBnpuFjSZFGXXX51pXa-759415648.png"},"Dfe":{"tit":"上一页","dii":0,"dnu":20170419},"Dus":{"dwi":60,"dhe":60,"top":"180","lef":0}},{"def":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i2/759415648/TB2FvTtXIHA11Bjy0FiXXckfVXa-759415648.png"},"hov":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":"https://img.alicdn.com/imgextra/i1/759415648/TB2_uCToYBmpuFjSZFuXXaG_XXa-759415648.png"},"Dfe":{"tit":"下一页","dii":1,"dnu":20170420},"Dus":{"dwi":60,"dhe":60,"top":"180","lef":"719"}}]},"mbl":{"cfg":{"mtx":"1","dii":"1","lan":0},"par":{"wid":900,"hei":20,"ali":"center","mat":0,"mar":"auto","mab":10,"mal":"auto","bgi":1,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"#000000","bgs":"","opa":0.5,"br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10},"nav":[{"dii":0,"dnu":100000,"def":{"Tit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#cccccc","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#cccccc","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36},"HTit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#ffffff","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#ffffff","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#222222","wid":100,"hei":36},"dpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"hpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""}}},{"dii":1,"dnu":100001,"def":{"Tit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#cccccc","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#cccccc","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36},"HTit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#ffffff","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#ffffff","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#222222","wid":100,"hei":36},"dpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"hpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""}}},{"dii":2,"dnu":10002,"def":{"Tit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#cccccc","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#cccccc","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36},"HTit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#ffffff","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#ffffff","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#222222","wid":100,"hei":36},"dpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"hpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""}}},{"dii":3,"dnu":10003,"def":{"Tit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#cccccc","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#cccccc","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36},"HTit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#ffffff","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#ffffff","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#222222","wid":100,"hei":36},"dpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"hpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""}}},{"dii":4,"dnu":10004,"def":{"Tit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#cccccc","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#cccccc","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36},"HTit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#ffffff","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#ffffff","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#222222","wid":100,"hei":36},"dpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"hpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""}}},{"dii":5,"dnu":10005,"def":{"Tit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#cccccc","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#cccccc","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36},"HTit":{"dii":0,"fsi":0,"tit":"1","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#ffffff","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":14,"col":"#ffffff","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#222222","wid":100,"hei":36},"dpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"hpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""}}}],"chi":{"wid":20,"hei":20,"mat":"-2","mar":"6","mab":"auto","tijc":"true","lijc":"true","Tit":{"dii":"1","fsi":0,"tit":"●","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#cccccc","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":"25","col":"#ffffff","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#666666","wid":100,"hei":36},"HTit":{"dii":"1","fsi":0,"tit":"●","ftf":"微软雅黑","ftw":"normal","ali":"center","inp":"px","ind":0,"bsi":0,"bst":"solid","bot":0,"bct":"transparent","bsr":"solid","bor":1,"bcr":"#ffffff","bsb":"solid","bob":0,"bcb":"transparent","bsl":"solid","bol":0,"bcl":"transparent","lin":36,"fts":30,"col":"#01B592","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36},"dpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""},"hpz":{"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"transparent","bgs":""}}}}}},"cfg":{"tit":"淘宝圆点轮播","inf":"http://www.yilingsj.com/zxsc/lbtx/2017-05-23/525.html","tim":"导出时间：2017-05-23 09:35:37","typ":"tbLbYd"},"vie":{"vt0":{},"vt1":[]}}

古语有云：“龙生九子，九子各不同！”
来艺灵这里使用工具的看官各自需要自然也有所不同。艺灵的工具是比较灵活的，而且开放的权限也非常大！相同的工具可以做出若干不同的模板出来。由于展示的模板有限及其他因素影响，所以目前的模板并不能满足更多的看官。
所以，如果看官找不到符合您的模板，请先定位自身的需求及要实现的功能，然后再用相关的工具制作自己要的效果。
如果看官愿意分享自已制作的模板，可以联系艺灵球球号：315800015，感谢看官的参与和贡献！

模板使用教程

ps:如果您是新手，请按照下方的教程步骤，一步步操作才能还原哦！还原后更换掉您自己的图片、链接点击生成后就是您自己的代码啦！

第一步：向下拉页面，当看到【模板代码】4个字时停止，复制下面文本域中的代码。
小提示：鼠标在这里单击一下，然后按下Ctrl+A可全选，再按下Ctrl+C可进行复制，如果是mac系统，Command+A是全选，Command+C是复制。
第二步：点击上方的红字【戳我获取】，此时会跳转到对应的软件页面
第三步：点击【导入模板】--粘贴自己的代码，快捷键：Ctrl+V，mac系统是：Command+V，粘贴后点击确定就可以了。来张图片教程吧！模板代码还原教程

分享模板

据说喜欢分享的看官都已成大神且涨工资了！！！(【分享】按钮在屏幕右侧。)

亲，扫个码支持一下艺灵呗~

如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！

发布时间：2017-05-23 10:03:33　-　阅：

评论区

我要评论