【天猫/淘宝适用】首页全屏自定义单品多排轮播滚动代码 - 代码分享 - 卖家网 -Powered by www.bbsmj.com
 找回密码
 立即入住

QQ登录

只需一步,快速开始

lj_sqym

logininbaidu

搜索

【天猫/淘宝适用】首页全屏自定义单品多排轮播滚动代码

【天猫/淘宝适用】首页全屏自定义单品多排轮播滚动代码效果如图:
代码如下:


  1. <div style="height:230px;border:none;"> <div class="J_TWidget footer-more-trigger sn-simple-logo" data-widget-config="{'disableBtnCls':'disable','nextBtnCls':'mall-nextm9w46aegkw37','navCls':'crazy_navm9w46aegkw37','prevBtnCls':'mall-prevm9w46aegkw37','activeTriggerCls':'hidden','circular':true,'easing':'easeOutStrong','autoplay':true,'duration':0.5,'delay':0.1,'contentCls':'crazy_contentm9w46aegkw37','effect':'scrollx','interval':4}" data-widget-type="Carousel" style="z-index:30;margin:0;padding:0;border:0;left:auto;top:auto;right:auto;width:990px;height:230px;" data-widget-init="1"> <div class="crazy_kuangm9w46aegkw37 clearfix footer-more-trigger sn-simple-logo" style="z-index:30;width:990px;height:230px;margin:0;padding:0;border:0;left:0px;top:0px;right:auto;overflow:hidden;"> <div class="freeze-layer footer-more-trigger footer-more most-footer sn-simple-logo crazynav" style="background:none;cursor:auto;display:block;width:950px;height:1px;text-align:center;left:20px;top:50px;margin:0;padding:0;border:0;z-index:99;"> <div class="J_TWidget mall-prevm9w46aegkw37 hidden tb-shop-popup-show ks-popup-hidden ks-overlay-hidden" data-widget-config="{&quot;trigger&quot;:&quot;.mgzxzs_m9w46aegkw37&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.mgzxzs_m9w46aegkw37&quot;,&quot;offset&quot;:[-475,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display: block; position: absolute; left: -30px; top: 5px; z-index: 99999800;" data-widget-init="1" id="ks-component10566"><div class="ks-popup-content"> <div class="mall-prevm9w46aegkw37" style="font-size:100px;cursor:pointer;"> <img src="//gdp.alicdn.com/imgextra/i1/704578281/TB2sMgSeXXXXXbFXpXXXXXXXXXX_!!704578281.png"> </div> </div></div> <div class="J_TWidget mall-nextm9w46aegkw37 hidden tb-shop-popup-show ks-popup-hidden ks-overlay-hidden" data-widget-config="{&quot;trigger&quot;:&quot;.mgzxzs_m9w46aegkw37&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.mgzxzs_m9w46aegkw37&quot;,&quot;offset&quot;:[475,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display: block; position: absolute; left: 920px; top: 5px; z-index: 99999800;" data-widget-init="1" id="ks-component10578"><div class="ks-popup-content"> <div class="mall-nextm9w46aegkw37" style="font-size:100px;cursor:pointer;"> <img src="//gdp.alicdn.com/imgextra/i1/704578281/TB2nGleepXXXXXwXXXXXXXXXXXX_!!704578281.png"> </div> </div></div> </div> <div style="height: 230px; width: 990px; overflow: hidden; padding: 0px; margin: 0px; position: relative;" class="mgzxzs_m9w46aegkw37"> <ul class="crazy_contentm9w46aegkw37" style="z-index: 30; position: absolute; width: 999999px; left: -990px;"> <li style="border: none; width: 990px; height: 230px; display: block; float: left;" class="ks-switchable-panel-internal8118"> <table width="990" border="0"> <tbody> <tr> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.1.1eb637be3qOtST&amp;id=563523967863&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.1"><img src="//gdp.alicdn.com/imgextra/i1/704578281/TB29KlQXIyYBuNkSnfoXXcWgVXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.2.1eb637be3qOtST&amp;id=563446396139&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.2"><img src="//gdp.alicdn.com/imgextra/i4/704578281/TB2KOJKaHuWBuNjSszgXXb8jVXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.3.1eb637be3qOtST&amp;id=556674561437&amp;rn=c5726b49161c0b47fa1751d3e2ae31f9&amp;abbucket=15&amp;sku_properties=1627207:3232483&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.3"><img src="//gdp.alicdn.com/imgextra/i3/704578281/TB2l8gNm9tYBeNjSspaXXaOOFXa_!!704578281.png" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.4.1eb637be3qOtST&amp;id=563855558273&amp;rn=8de975330608a7edfefcf82f5a8d3938&amp;abbucket=15&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.4"><img src="//gdp.alicdn.com/imgextra/i4/704578281/TB2eg0sXOMnBKNjSZFoXXbOSFXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.5.1eb637be3qOtST&amp;id=20250689295&amp;rn=8de975330608a7edfefcf82f5a8d3938&amp;abbucket=15&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.5"><img src="//gdp.alicdn.com/imgextra/i2/704578281/TB2Q0vFaTtYBeNjy1XdXXXXyVXa_!!704578281.jpg" alt=" 198X198.jpg"> </a> </td> </tr> <tr> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> Hellokitty中筒袜<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼袜子<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼袜子<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> HelloKitty袜子<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼袜子<font color="red"></font> </div> </td> </tr> <tr> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> </tr> </tbody> </table> </li> <li style="border: none; width: 990px; height: 230px; display: block; float: left;" class="ks-switchable-panel-internal8118"> <table width="990" border="0"> <tbody> <tr> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.6.1eb637be3qOtST&amp;id=565111682683&amp;rn=3ab34374e8643070e2953b3520932cf0&amp;abbucket=15&amp;sku_properties=20017:9318469&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.6"><img src="//gdp.alicdn.com/imgextra/i2/704578281/TB2PiBLaL9TBuNjy0FcXXbeiFXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.7.1eb637be3qOtST&amp;id=554914394415&amp;rn=8b4af80ac3c7abacbc88dea3e8aa61cf&amp;abbucket=15&amp;sku_properties=20509:28314&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.7"><img src="//gdp.alicdn.com/imgextra/i4/704578281/TB28oRJaKuSBuNjSsplXXbe8pXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.8.1eb637be3qOtST&amp;id=520556138683&amp;sku_properties=20017:9318469&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.8"><img src="//gdp.alicdn.com/imgextra/i4/704578281/TB2sVvsaSBYBeNjy0FeXXbnmFXa_!!704578281.jpg" alt=" 198X198.jpg" data-spm-anchor-id="a1z10.1-b-s.5003-14571717485.i0.1eb637be3qOtST"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.9.1eb637be3qOtST&amp;id=526176114703&amp;sku_properties=20017:7201299&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.9"><img src="//gdp.alicdn.com/imgextra/i2/704578281/TB2rdvFaTtYBeNjy1XdXXXXyVXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.10.1eb637be3qOtST&amp;id=520533027358&amp;sku_properties=20017:9318469&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.10"><img src="//gdp.alicdn.com/imgextra/i2/704578281/TB2prXQaN1YBuNjy1zcXXbNcXXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> </tr> <tr> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼帽子<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼帽子<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼帽子<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼帽子<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 芭比帽子<font color="red"></font> </div> </td> </tr> <tr> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> </tr> </tbody> </table> </li> <li style="border: none; width: 990px; height: 230px; display: block; float: left;" class="ks-switchable-panel-internal8118"> <table width="990" border="0"> <tbody> <tr> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.11.1eb637be3qOtST&amp;id=564904525654&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.11"><img src="//gdp.alicdn.com/imgextra/i2/704578281/TB2oEHpaTlYBeNjSszcXXbwhFXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.12.1eb637be3qOtST&amp;id=547149341092&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.12"><img src="//gdp.alicdn.com/imgextra/i4/704578281/TB2ftx_XdMnyKJjSZPhXXaeZVXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.13.1eb637be3qOtST&amp;id=548414162610&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.13"><img src="//gdp.alicdn.com/imgextra/i3/704578281/TB2DWF.XhAlyKJjSZFyXXbm_XXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.14.1eb637be3qOtST&amp;id=548106126456&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.14"><img src="//gdp.alicdn.com/imgextra/i3/704578281/TB23Vt_XdUnyKJjSZFpXXb9qFXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> <td> <a href="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-14571717485.15.1eb637be3qOtST&amp;id=564976118945&amp;scene=taobao_shop" target="_blank" data-spm-wangpu-module-id="5003-14571717485" data-spm-anchor-id="a1z10.1-b-s.w5003-14571717485.15"><img src="//gdp.alicdn.com/imgextra/i4/704578281/TB2kaXRaH5YBuNjSspoXXbeNFXa_!!704578281.jpg" alt=" 198X198.jpg"></a> </td> </tr> <tr> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼斜挎包<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> 迪士尼公主手提包<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> hellokitty公主斜挎包<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> hellokitty公主斜挎包<font color="red"></font> </div> </td> <td> <div style="text-align:center;font-family:microsoft yahei,helvetica,sans-serif;font-size:12px;"> Hellokitty包包<font color="red"></font> </div> </td> </tr> <tr> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> <td> <div style="text-align:center;"> <img src="//gdp.alicdn.com/imgextra/i4/704578281/TB24ABaepXXXXaVXXXXXXXXXXXX_!!704578281.png" alt=" 购物车标志.png"> </div> </td> </tr> </tbody> </table> </li> </ul> </div>  </div> <ul class="crazy_navm9w46aegkw37" style="display:none;"> <li class="ks-switchable-trigger-internal8117">1</li><li class="ks-switchable-trigger-internal8117 hidden">2</li><li class="ks-switchable-trigger-internal8117">3</li></ul></div> </div>
复制代码


左右方向箭头图片自己下载:
向右箭头,上传到图片空间替代代码“
  1. http://gdp.alicdn.com/imgextra/i1/704578281/TB2nGleepXXXXXwXXXXXXXXXXXX_!!704578281.png
复制代码

向左箭头,上传到图片空间替代代码

  1. http://gdp.alicdn.com/imgextra/i1/704578281/TB2sMgSeXXXXXbFXpXXXXXXXXXX_!!704578281.png
复制代码

其他图片设计好替代图片及链接单品的代码即可(img内为图片代码,href为链接代码
图片宽width: 990px; 高height: 230px;
<table width="990" border="0"> 。。。。</table>这范围内容代码为滚动轮播的图片切片。三个<li>。。。。。。</li>代表三个单品多排切片。


不懂代码的童鞋,可以跟帖提问哦


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即入住  logininbaidu

x
哎...今天够倒霉的的,签到来了7...
该帖共收到 0 条回复!
*滑动验证:
您需要登录后才可以回帖 登录 | 立即入住  logininbaidu

本版积分规则

美图秀

    • Photoshop CC 2017 正式版 32/64位简体中文
    • 分享到朋友圈及QQ空间代码, 适合淘宝/天猫
    • 【淘宝/天猫】首页全屏代码分享
    • Adobe Dreamweaver CC 2018 Win32/64位系统
    • 【天猫/淘宝适用】首页全屏自定义单品多排
!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_sctz! !jz_fhlb! !jz_gfqqq! 音乐娱乐

QQ | Archiver| 小黑屋| 手机版| 门户地图| 论坛地图| 免责声明| 卖家网-卖家论坛-卖家社区 ( 闽ICP备09009728号-6 ) |

GMT+8, 2019-7-16 07:00 , Processed in 0.387011 second(s), 38 queries . > 本站法律顾问: 福建达业律师事务所 电话: 0595-28225588

闽公网安备 35050402880023号

快速回复 返回顶部 返回列表