淘宝基础版全屏轮播代码(淘宝装修多图轮播代码教程)

[ 淘宝设计   // 2017-01-18 18:03:38  ]
 

淘宝基础版旺铺的卖家都非常羡慕专业版旺铺可以有多图全屏1920px的轮播大海报的效果。其实淘宝基础版也可以使用代码来突破950px区域的限制达到专业版的功能效果。通过淘宝基础版旺铺1920px全屏轮播海报制作教程,可以节约每个月50元升级专业版的money了,让你的淘宝基础版也可以装修出高大上的感觉!

淘宝基础版全屏轮播代码

首先和大家分享旺铺基础版1920PX全屏轮播海报的代码如下:

折叠XML/HTML Code复制内容到剪贴板
  1. <div class="J_TWidget mypopermqgvkFqb" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-tmqgvkFqb','navCls':'sj-nmqgvkFqb','autoplay':'true'}" data-widget-type="Tabs" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; height: 600px; overflow: hidden; padding-top: 0px">    
  2. <div class="sj-tmqgvkFqb"><div class="J_TWidget" data-widget-config="{'contentCls': 'sj-contentmqgvkFqb','navCls': 'sj-nmqgvkFqb','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev1mqgvkFqb','nextBtnCls':'next1mqgvkFqbmqgvkFqb'}" data-widget-type="Carousel"><div class="pa2" style="width:1920px;height:600px;overflow:hidden;position:relative;left:-685px;top:0px;"><ul class="sj-contentmqgvkFqb" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 600px; overflow: hidden; padding-top: 0px"><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height:600x; padding-top: 0px;"><div class="J_TWidget" data-title="www.softhome.cc" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'dm_a'}" data-widget-type="Tabs" style="height:590px;">    
  3.     <div class="dm_a" style="height:600px;">    
  4.         <div class="footer-more footer-more-trigger" style="width:1920px;height:600px;top:auto;padding:0px;border:none;left:50%;background-color: transparent; ">    
  5.             <div class="footer-more footer-more-trigger" style="width:1920px;height:600px;padding:0px;border:none;left:-50%;top:-10px;background-color: transparent; ">    
  6.                 <div data-widget-config="{'contentCls': 'dmcontent','navCls': 'dms','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">    
  7.                                         <div class="J_TWidget prev" data-widget-config="{'trigger':'.dm_FQ','align':{'node':'.dm_FQ','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">    
  8.                         <div class="prev" style="font-size:100px;cursor:pointer;">    
  9.                             <img src="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png">    
  10.                         </div>    
  11.                     </div>    
  12.                     <div class="J_TWidget next" data-widget-config="{'trigger':'.dm_FQ','align':{'node':'.dm_FQ','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">    
  13.                         <div class="next" style="font-size:100px;cursor:pointer;">    
  14.                             <img src="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png">    
  15.                         </div>    
  16.                     </div>    
  17.   <div style="height:600px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="dm_FQ">    
  18.        <ul class="dmcontent" style="height:600px;width:1920px;padding:0px;margin:0px;">    
  19.         <li class="item"><a target="_blank" href="http://www.softhome.cc"><img src="https://img.alicdn.com/imgextra/i2/1604414189/TB25CMOiVXXXXbwXXXXXXXXXXXX_!!1604414189.jpg"></a></li>    
  20.         <li class="item"><a target="_blank" href="http://www.softhome.cc"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2o9kHiVXXXXc_XXXXXXXXXXXX_!!1604414189.jpg"></a></li>    
  21.         <li class="item"><a target="_blank" href="http://www.softhome.cc"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2Rfs0iVXXXXX0XXXXXXXXXXXX_!!1604414189.jpg"></a></li>    
  22.         <li class="item"><a target="_blank" href="http://www.softhome.cc"><img src="https://img.alicdn.com/imgextra/i3/1604414189/TB2RSkZiVXXXXXZXXXXXXXXXXXX_!!1604414189.jpg"></a></li>    
  23.         <li class="item"><a target="_blank" href="http://www.softhome.cc"><img src="http://img01.taobaocdn.com/imgextra/i1/796978238/TB2pzSubXXXXXXtXpXXXXXXXXXX-796978238.jpg"></a></li>    
  24.             </ul></div>    
  25. <div class="footer-more footer-more-trigger" style="padding:0px;border:none;left:50%;top: 0;background-color: transparent; display:block;">    
  26.                                                 <div class="footer-more footer-more-trigger" style="background-color: transparent; z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:-960px;top:560px;">    
  27.       <ul class="dms" style="width:950px;height:45px;margin:0 auto;text-align: center;border:none;">    
  28.     
  29. <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i2/1604414189/TB25CMOiVXXXXbwXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  30.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2o9kHiVXXXXc_XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  31.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2Rfs0iVXXXXX0XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  32.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i3/1604414189/TB2RSkZiVXXXXXZXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  33.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="http://img01.taobaocdn.com/imgextra/i1/796978238/TB2pzSubXXXXXXtXpXXXXXXXXXX-796978238.jpg" width="153px" height="36px"></li>    
  34.                                                                     </ul>    
  35.                         </div>    
  36.     
  37. <div class="footer-more footer-more-trigger" style="background-color: transparent; z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:-960px;top:560px;">    
  38.                             <ul class="dmb" style="width:950px;height:45px;margin:0 auto;text-align: center;border:none;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7; background: none;">    
  39.                                                                     <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i2/1604414189/TB25CMOiVXXXXbwXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  40.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2o9kHiVXXXXc_XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  41.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2Rfs0iVXXXXX0XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  42.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i3/1604414189/TB2RSkZiVXXXXXZXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>    
  43.                                                                             <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="http://img01.taobaocdn.com/imgextra/i1/796978238/TB2pzSubXXXXXXtXpXXXXXXXXXX-796978238.jpg" width="153px" height="36px"></li>    
  44.                                                                     </ul>    
  45.                         </div>    
  46.                                                   </div>    
  47.                 </div>    
  48.             </div>    
  49.         </div>    
  50.     </div>    
  51.     <ul class="ks-switchable-nav" style="display:none;"></ul>    
  52. </div></li></ul></div><div style="width: 1920px; display: none; height: 0px; overflow: hidden"><ul class="sj-tmqgvkFqb" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 50px; padding-top: 0px"><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 315px; padding-right: 0px; background: black; float: left; height: 600px; padding-top: 0px"></li><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 315px; padding-right: 0px; background: #f8c; float: left; height: 600px; padding-top: 0px"></li><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 315px; padding-right: 0px; background: #f1c; float: left; height: 600px; padding-top: 0px"></li></ul></div><ul class="sj-nmqgvkFqb" style="display: none;"><li>1</li></ul></div></div></div>    
  53.     
  54. 本段代码来自 http://www.softhome.cc    

使用方法:

在淘宝装修页面新建一个右侧750自定义区,在代码模式下把上面的代码复制进去,然后发布就可以了,当然要把代码中的图片地址和链接地址简单的修改一下(将上面的代码复制到dreamweaver中,查找一下图片地址,进行替换你需要使用的图片地址,注意替换图片大小为:1920*600px)

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦