天猫4图商品分类轮播+底图+滑过显示箭头特效 --艺灵设计

天猫4图商品分类轮播+底图+滑过显示箭头特效

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

1、【DIY功能设置】中有一个底图开关，开启后填写底图的src即可。

视频教程

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

暂无

模板代码

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

{"def":{"wid":"1256","hei":"502","xbj":10,"hua":1200,"css":"","dii":[0,7,"0,1,2,3,4,5,6,7,",8,1,"","","tb","",null,null],"dsi":{"pjcs":1,"Lbcs":0},"wgx":1,"she":"1","qpk":1,"gns":1,"tzg":0,"stt":0,"xht":1,"ltt":0,"fdg":1,"gjg":0,"dpm":1,"ncs":{"Ljt":{"v":0,"t":".ylsj-btntx-1 .ylsj-btn-w .drag{display:none;}.ylsj-btntx-1:hover .ylsj-btn-w .drag{display:block;}.pjcss-chi,.ylsj-hd-on .f-vh{visibility:hidden}.pjcss-par:hover .pjcss-chi{visibility:visible}"}}},"tpz":[{"dii":0,"dnu":100000,"def":{"wid":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i3/759415648/TB2lrgUar8kpuFjy0FcXXaUhpXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","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":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i4/759415648/TB2rDoTaq8lpuFjy0FpXXaGrpXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","top":0,"lef":294},"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":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i3/759415648/TB2UhgOawJkpuFjSszcXXXfsFXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","top":0,"lef":588},"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":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i1/759415648/TB2tMcRarFlpuFjy0FgXXbRBVXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","top":256,"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":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i3/759415648/TB2lrgUar8kpuFjy0FcXXaUhpXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","top":256,"lef":294},"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":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i4/759415648/TB2rDoTaq8lpuFjy0FpXXaGrpXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","top":256,"lef":588},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}},{"dii":6,"dnu":10006,"def":{"wid":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i3/759415648/TB2UhgOawJkpuFjSszcXXXfsFXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","top":512,"lef":0},"bgi":0,"bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0}},{"dii":7,"dnu":10007,"def":{"wid":294,"hei":452,"bgc":"transparent","bgs":"http://img.alicdn.com/imgextra/i1/759415648/TB2tMcRarFlpuFjy0FgXXbRBVXa-759415648.jpg","uri":"","tar":"_blank","lji":1,"dii":0,"htm":{"txt":"","wid":"294","hei":"452","mat":0,"mar":"auto","mab":0,"mal":"50%"},"Dfe":{"dnu":100000},"Dus":{"dwi":"294","dhe":"452","top":512,"lef":294},"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":"294","hei":"452","mat":0,"mar":"20","mab":10,"mal":"auto","pat":"50","dcz":{"bgi":"1","bkz":0,"att":"scroll","rep":"no-repeat","pox":"center","pxi":1,"pxv":0,"poy":"top","pyi":0,"pyv":0,"bgc":"#ffffff","bgs":"http://img.alicdn.com/imgextra/i1/759415648/TB2MldXaYxmpuFjSZJiXXXauVXa-759415648.png"},"num":"4","xqy":0,"chh":0},"Tlb":{"cfg":{"dur":0.5,"del":0,"eff":"scrollx","eas":"easeOutStrong","aut":"true","btn":"true","has":"false","cir":"true","tri":"mouse","act":0,"aCl":"hidden","vie":"","ste":1,"shu":3,"cou":"false","cos":""},"btn":{"Dus":{"btx":"1","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":"196","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":"196","lef":"1176"}}]},"mbl":{"cfg":{"mtx":0,"dii":0,"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},"chi":{"wid":20,"hei":20,"mat":"-2","mar":10,"mab":"auto","tijc":"true","lijc":"true","Tit":{"dii":0,"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":30,"col":"#cccccc","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#666666","wid":100,"hei":36},"HTit":{"dii":0,"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":"#FF6208","br2":0,"brx":"px","brt":10,"brr":10,"brb":10,"brl":10,"bgc":"#333333","wid":100,"hei":36}},"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}}},{"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}}},{"dii":2,"dnu":100002,"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}}},{"dii":3,"dnu":100003,"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}}},{"dii":4,"dnu":100004,"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}}},{"dii":5,"dnu":100005,"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}}},{"dii":6,"dnu":100006,"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}}},{"dii":7,"dnu":100007,"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}}}]}}}},"cfg":{"tit":"淘宝旋转木马轮播-懒人版","inf":"http://www.yilingsj.com/zxsc/lbtx/2017-04-25/512.html","tim":"导出时间：2017-04-25 15:04:30","typ":"tbXzmm-lr"},"vie":{"vt0":{},"vt1":[]}}

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

模板使用教程

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

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

分享模板

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

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

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

发布时间：2017-04-25 18:26:16　-　阅：

评论区

我要评论