淘宝装修经常需要用到一些效果,今天给大家说一说淘宝店铺首页全屏轮播怎么做。
工具/原料
电脑
淘宝账号
方法/步骤
1、首先登陆淘宝帐号,找到【店铺装修】,点击进入。
2、在装修页面左侧模块,找到自定义模板,拖到右边适合位置。
3、选中自定义模板,点击右上角的【编辑】。
4、在编辑对话框里选择不显示标题,点击第一个图标编辑【源码】,然后在框里填写好代码。点击确定。
5、做好的图片效果如下所示。三图轮播,下面有三图的小缩略图。
6、这里给大家详细说一下蜣贺鱿柢代码。以下代码,直接复制就可以用了哦。说实话,有点长。【代码中的跳转链接地址需要更换成你店铺的产品链接地址,图片地址需要更换成你店铺图片空间的图片链张嫜较氅接,图片高宽可以直接更改1920和997这个宽高数值就行,这个是三图的代码,如果要二图直接删除一组<li</li>,要加成四图的,直接增加一组<li</li>】代码如下。<divdata-widget-config="{"navCls":"hidden-nav","effect":"fade","circular":true,"contentCls":"bslide_tRkXk"}"data-widget-type="Tabs"><divclass="J_TWidgetbslide_tRkXk"style="height:997px;"data-widget-config="{"navCls":"hidden-nav","effect":"fade","circular":true,"contentCls":"bnav_iyBNR"}"data-widget-type="Tabs"><divstyle="height:997px;width:1920px;left:-485px;top:0px;"data-widget-config="{"duration":1.0,"disableBtnCls":"disable","nextBtnCls":"next","navCls":"scroller-nav","contentCls":"scroller-content","prevBtnCls":"prev","effect":"scrollx","true":true,"interval":"4","steps":1,"easing":"easeOutStrong","autoplay":true}"data-widget-type="Carousel"><divclass="J_TWidgetprev"data-widget-type="Popup"data-widget-config="{"trigger":".popup_KDFOg","align":{"node":".popup_KDFOg","offset":[-445,0],"points":["cc","cc"]}}"style="cursor:pointer;width:60px;height:130px;background:#000000url(//gdp.alicdn.com/imgextra/i2/770458061/TB2WUffaXXXXXcQXXXXXXXXXXXX-770458061.gif)no-repeatcentercenter;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;"></div><divclass="J_TWidgetnext"data-widget-type="Popup"data-widget-config="{"trigger":".popup_KDFOg","align":{"node":".popup_KDFOg","offset":[445,0],"points":["cc","cc"]}}"style="cursor:pointer;width:60px;height:130px;background:#000000url(//gdp.alicdn.com/imgextra/i2/770458061/TB2oSbdaXXXXXbyXpXXXXXXXXXX-770458061.gif)no-repeatcentercenter;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;"></div><divclass="scrollerpopup_KDFOg"style="width:1920px;height:997px;overflow:hidden;"><ul><listyle="width:1920px;height:997px;overflow:hidden;border:none;margin:0;"><ahref="货物1链接"target="_blank"style="display:block;cursor:pointer;width:1920px;height:997px;background:url(图片1链接)no-repeatcenter0;"></a></li><listyle="width:1920px;height:997px;overflow:hidden;border:none;margin:0;"><ahref="货物2链接"target="_blank"style="display:block;cursor:pointer;width:1920px;height:997px;background:url(图片2链接)no-repeatcenter0;"></a></li><listyle="width:1920px;height:997px;overflow:hidden;border:none;margin:0;"><ahref="货物3链接"target="_blank"style="display:block;cursor:pointer;width:1920px;height:997px;background:url(图片3链接)no-repeatcenter0;"></a></li></ul></div><div><ulclass="J_TWidgetscroller-nav"style="margin-top:6px;bottom:0px;width:1920px;overflow:hidden;text-align:center;left:0;font-family:tahoma;height:73px;color:#FFF;font-size:10px;bottom:0;"data-widget-type="Compatible"data-widget-config="{"png":true,"png_bg":true}"><listyle="width:236px;height:73px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;overflow:hidden;height:73px;margin:01px;background:#000000;"><imgstyle="border:1pxsolid;"src="图片1链接"width="234"height="71"alt=""/></li><listyle="width:236px;height:73px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;overflow:hidden;height:73px;margin:01px;background:#000000;"><imgstyle="border:1pxsolid;"src="图片2链接"width="234"height="71"alt=""/></li><listyle="width:236px;height:73px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;overflow:hidden;height:73px;margin:01px;background:#000000;"><imgstyle="border:1pxsolid;"src="图片3链接"width="234"height="71"alt=""/></li></ul></div></div><ulstyle="display:none;height:0;line-height:0;font-size:0;overflow:hidden;"><li>1</li></ul></div></div><aname="sgmb"></a>