乐学 淘宝店铺首页大图尺寸大于950*400的轮播图片怎么弄的?
第二加代码
专业版旺铺可以使1920px尺寸的全屏大图轮播。下面是专业版1920大图全屏轮播代码，我测试过了可以使用，你只需要修改代码中的红色文字就可以了
<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:550px;overflow:hidden;">
<div class="taobaoux" style="height:550px;">
<div class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
<div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
<div class="J_TWidget" data-widget-config="{'trigger':'ux1920','align':{'node':'ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="prev1920" style="font-size:100px;cursor:pointer;opacity:05;color:#f00;"><</div>
<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:550px;overflow:hidden;">
<div class="taobaoux" style="height:550px;">
<div class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
<div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
<div class="J_TWidget" data-widget-config="{'trigger':'ux1920','align':{'node':'ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="prev1920" style="font-size:100px;cursor:pointer;opacity:05;color:#f00;"><</div>
<div class="next1920" style="font-size:100px;cursor:pointer;opacity:05;color:#f00;">></div>
</div>
<div style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
<ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="此处替换连接1" style="padding:0px;margin:0px;">
<img src="此处替换网址1" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="此处替换连接2" style="padding:0px;margin:0px;">
<img src="此处替换大网址2" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="此处替换连接3" style="padding:0px;margin:0px;">
<a target="_blank" href="此处替换连接4" style="padding:0px;margin:0px;">
<img src="此处替换大网址4" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="此处替换连接5" style="padding:0px;margin:0px;">
<img src="此处替换大网址5" width="1920px" height="550px" border="0px"></a></li>
</ul>
</div>
<div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(此处替换小导航背景网址png) repeat;top:505px;">
<ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 47px;">
<img src="此处替换小网址1" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 47px;">
<img src="此处替换小网址2" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 47px;">
<img src="此处替换小网址3" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 47px;">
<img src="此处替换小网址4" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="ks-switchable-nav" style="display:none;"></ul>
</divphotoshop制作好，把编辑成一样大小。或者用美图秀秀制作一样。
然后把上传到支持外链的网络相册。
点击属性复制地址到下面代码里
很好的轮番代码，淘宝自带的轮番功能总是要留白，使用以下代码后页面不再留白了，店铺效果更整体了。使用方法是在店铺里增加一个自定义区，然后把代码复制到自定义区的代码编辑区
轮番 上下滚动
<div class="box J_TBox" >
<div class="shop-slider">
<div class="bd">
<div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" style="height:高度px;" data-
widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
<ul class="lst-main">
<li><a href="连接地址1" ><img src="地址"></a></li>
<li><a href="连接地址1" ><img src="地址"></a></li>
<li><a href="连接地址1" ><img src="地址"></a></li>
</ul>
</div>
</div>
</div>
</div>
第二种渐变轮番
<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-
config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-
type="Slide" data-type="fade">
<ul class=lst-main>
<li><A style="WIDTH: 宽度px; HEIGHT: 高度px" href="商品连接地址" target=_blank><img alt="" src="地址"></A></li>
<li><A style="WIDTH: 宽度px; HEIGHT: 高度px" href="商品连接地址" target=_blank><img alt="" src="地址"></A></li>
</ul></DIV>
渐变轮番第二种效果
<DIV class="slider-promo J_Slider J_TWidget" style="HEIGHT: 高度px"
data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}"
data-widget-type="Slide" data-type="fade">
<UL class=lst-main>
<LI><A href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="地址"></A>
<LI><A href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="地址"></A>
<LI><A href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="地址"></A>
</LI></UL></DIV>
0条评论