当前位置：首页 > 科技 > 电商

淘宝C店全屏轮播大海报代码带缩略图？

来源：责编：时间：2023-11-09 12:47:42 310观看

导读第一步，我先把代码贴出来。如下：<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'taobaoux'}"data-widget-type="Tabs"styl

第一步，我先把代码贴出来。如下：<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'taobaoux'}"data-widget-type="Tabs"style="height:490px;overflow:hidden;"><divclass="taobaoux"style="height:380px;"><divclass="sn-simple-logo"style="width:990px;height:380px;top:auto;padding:0px;border:none;left:97%;"><divclass="sn-simple-logo"style="width:990px;height:380px;padding:0px;border:none;left:-960px;"><divdata-widget-config="{'contentCls':'taobaoux-com','navCls':'bbs-taobaoux-com','effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay':true,'viewSize':[990],'circular':true}"data-widget-type="Carousel"class="J_TWidget"><divclass="J_TWidget"data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"></div><divclass="J_TWidget"data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"></div><divstyle="height:380px;width:990px;overflow:hidden;padding:0px;margin:0px;"class="ux1920"><ulclass="taobaoux-com"style="height:550px;width:990px;padding:0px;margin:0px;"><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="图片一"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="图片二"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="图片三"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="图片四"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="图片五"width="990px"height="380px"border="0px"></a></li></ul></div><divstyle="padding:0px;border:none;left:97%;"><divstyle="width:990px;height:110px;padding:0px;border:none;left:-960px;background:url(http://demo.taobaoux.com/Carousel/Carousel_bg.png)repeat;top:505px;"><ulclass="bbs-taobaoux-com"style="width:990px;height:50px;margin:0auto;text-align:center;"><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="缩略图1"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="缩略图2"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="缩略图3"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="缩略图4"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="缩略图5"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li></ul></div></div></div></div></div></div></div>

我做的海报长宽是990*380的。算上下面的缩略图背景高度是110。缩略图长宽是190*100。如果海报长宽不是这个尺寸的话，是需要修改一下上面的尺寸的。

然后把做好的图片海报上传到图片空间，获得图片网址。并且把获得的网址对应替换掉图片。

最后复制装修的自定义模块。保存发布即可

最后就OK了，具体效果如下。

先把图片上传到自己淘宝空间里面

然后复制图片地址链接，然后打开一秒美工

然后填写对应的地址都填写上去。最后生成代码就行了。

获取了代码然后粘贴到自定义内容就行了源代码里面哦

在装修店铺中添加“自定义区”

对所弹对话框进行如图所示的操作

将上述设置好的代码进行粘贴，最后点击“确定”

会看到“自定义区”发生变化

最后点击“预览”查看最终效果

选择好自己要放在首页的海报（一般两张就可以了）

把要上传到首页的海报上传到图片空间

在淘宝首页添加一个自定义模块，点击源码编辑模式，复制下面的代码

<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'piao1365065449925fu'}"data-widget-type="Tabs"><divclass="piao1365065449925fu"style="height:500px;"><divclass="J_TWidget"data-widget-config="{
'contentCls':'slide-kun1365065449925content',
'triggerCls':'slide-kun1365065449925triggers',
'navCls':'slide-kun1365065449925triggers',
'triggerType':'mouse',
'effect':'scrollx',
			'prevBtnCls':'prev',
			'nextBtnCls':'next',
'steps':1,
'autoplay':true,
			'viewSize':[1366],
'circular':true
}"data-widget-type="Carousel"style="margin:0px;padding:0px;left:-180px;top:0px;width:1366px;z-index:10;"><divclass="J_TWidget"data-widget-config="{'trigger':'.first1365065449925trigger','align':{'node':'.first1365065449925trigger','offset':[0,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"><divclass="prev"style="width:90px;height:90px;float:left;"><imgdata-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/113535006/TB2S4eFXVXXXXX6XpXXXXXXXXXX_!!113535006.png"/></div><divclass="next"style="width:90px;height:90px;margin-left:950px;"><imgdata-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/113535006/TB2Li5HXVXXXXbIXXXXXXXXXXXX_!!113535006.png"/></div></div><divclass="first1365065449925trigger"style="margin:0px;padding:0px;width:1366px;height:500px;overflow:hidden;"><ulclass="slide-kun1365065449925content"style="margin:0px;padding:0px;width:1366px;height:500px;"><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><ahref="http://chenruimy.tmall.com/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"width="1366"/></a></li><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><ahref="http://chenruimy.tmall.com/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"width="1366"/></a></li><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><ahref="http://chenruimy.tmall.com/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"width="1366"/></a></li><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><ahref="http://chenruimy.tmall.com/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"height="500"width="1366"/></a></li></ul></div><ulclass="slide-kun1365065449925triggers"style="margin:0px;padding:0px;display:none;"><li> </li><li> </li><li> </li><li> </li></ul></div></div>

登陆淘宝旺铺专业版账号，进入店铺装修后台。

在950自定义模块下，添加模块。

新建一个自定义模块。

以下是缩略图全屏轮播的代码：——————————————————————————————<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'kmcomic'}"data-widget-type="Tabs"style="height:490px;overflow:hidden;"data-title="本代码由淘宝美工助理·特效代码生成器自动生成"><divclass="kmcomic"style="height:500px;"><divclass="footer-more-trigger"style="width:1920px;height:500px;top:auto;padding:0px;border:none;left:50%;"><divclass="footer-more-trigger"style="width:1920px;height:500px;padding:0px;border:none;left:-960px;"><divclass="J_TWidget"data-widget-config="{'contentCls':'kmcomiccontent','navCls':'kmcomictriggers','effect':'scrollx','easing':'elasticOut','prevBtnCls':'prev','nextBtnCls':'next','autoplay':true,'viewSize':[1920],'circular':true}"data-widget-type="Carousel"><divclass="J_TWidget"data-widget-config="{'trigger':'.qplb','align':{'node':'.qplb','offset':[0,-20],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"><divclass="prev"style="float:left;font-size:100px;cursor:default;opacity:0.5;color:#F00;"><span><imgborder="0"height="52"src="http://img04.taobaocdn.com/imgextra/i4/1015393481/T2BUiMXj4bXXXXXXXX-1015393481.png"width="52"/></span></div><divclass="next"style="margin-left:950px;font-size:100px;cursor:default;opacity:0.5;color:#F00;"><span><imgborder="0"height="52"src="http://img03.taobaocdn.com/imgextra/i3/1015393481/T2V9D_Xi4aXXXXXXXX-1015393481.png"width="52"/></span></div></div><divclass="qplb"style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;"><ulclass="kmcomiccontent"style="height:500px;width:1920px;padding:0px;margin:0px;"><listyle="width:1920px;height:500px;padding:0px;margin:0px;"><span><astyle="padding:0px;margin:0px;"ahref="链接1"target="_blank"><imgborder="0px"height="500"src="图片1"width="1920"/></a></span></li><listyle="width:1920px;height:500px;padding:0px;margin:0px;"><span><astyle="padding:0px;margin:0px;"ahref="链接2"target="_blank"><imgborder="0px"height="500"src="图片2"width="1920"/></a></span></li></ul></div><divclass="footer-more-trigger"style="padding:0px;border:none;left:50%;"><divclass="footer-more-trigger"style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background:url(http://img01.taobaocdn.com/imgextra/i1/1015393481/T2mwjGXApXXXXXXXXX-1015393481.png)repeat;top:453px;"><ulclass="kmcomictriggers"style="width:950px;height:50px;margin:0auto;text-align:center;"><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><span><imgborder="0px"height="39px"src="图片1"style="vertical-align:middle;margin:5px0;"width="120px"/></span></li><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><span><imgborder="0px"height="39px"src="图片2"style="vertical-align:middle;margin:5px0;"width="120px"/></span></li></ul></div></div></div></div></div></div><ulclass="ks-switchable-nav"style="display:none;"></ul></div>

将上述代码复制到记事本中，修改代码中的图片和链接地址。将图片1、图片2分别改成淘宝图片空间中，1920x500px尺寸的海报图片地址。将链接1、链接2分别改成点击图片后进入的页面地址。

复制修改好的代码，粘贴到店铺的自定义内容区。