当前位置:首页 » 全屏轮播代码 » 正文

基础版全屏轮播代码1920X500淘宝店铺装修自定义带缩略图轮播代码模板

3292 人参与  2017年11月14日 16:52  分类 : 全屏轮播代码  评论

基础版全屏轮播代码1920X500淘宝店铺装修自定义带缩略图轮播代码模板,保证可以用喔!

以下是效果图:

效果2.png

代码使用方法:代码分二部分:一部分放右侧 另一部分代码放左铡

右侧代码如下:

<div style="height:490px"></div>

左侧代码如下:

<DIV style="POSITION: static; HEIGHT: 500px" class=slider-promo>
<DIV style="WIDTH: 1920px; HEIGHT: 500px; TOP: 150px; LEFT: 50%" class="lst-trigger grid-s5m0">
<DIV style="WIDTH: 100%; HEIGHT: 100%; TOP: 0px; LEFT: 50%" class="lst-trigger col-sub">
<DIV style="WIDTH: 1920px; HEIGHT: 500px; OVERFLOW: hidden" class=J_TWidget data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','autoplay':'ture','activeTriggerCls': 'current','prevBtnCls':'prev','nextBtnCls':'next','navCls':'lst-trigger'}">
<DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup" data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">
<DIV style="FLOAT: left; CURSOR: pointer" class=prev title=上一屏><img src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/1578214660/T2kx56XcNbXXXXXXXX-1578214660.png"></DIV>
<DIV style="MARGIN-LEFT: 950px; CURSOR: pointer" class=next title=下一屏><img src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/1578214660/T2bMh6XehdXXXXXXXX-1578214660.png"> </DIV></DIV>
<DIV style="WIDTH: 1920px; HEIGHT: 500px" class=first-trigger2>
<div style="width:1920px;float:left;height:500px;" class="ks-switchable-content">
<div><a href="http://lveshizhe.tmall.com" target="_blank" data-attr-replace="[{'type':'href','desc':'轮播图片O1 宝贝页面地址,注意不是图片地址'}]"><img  style="width:1920px;height:500px;" alt="" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/1578214660/T2SlPlXgdaXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'data-ks-lazyload','desc':'轮播图片01的图片地址,尺寸为1920x500px'}]"></a></div>
<div><a href="http://lveshizhe.tmall.com" target="_blank" data-attr-replace="[{'type':'href','desc':'轮播图片O2 宝贝页面地址,注意不是图片地址'}]"><img  style="width:1920px;height:500px;" alt="" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/1578214660/T2mdHnXX0XXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'data-ks-lazyload','desc':'轮播图片02的图片地址,尺寸为1920x500px'}]"></a></div>
<div><a href="http://lveshizhe.tmall.com" target="_blank" data-attr-replace="[{'type':'href','desc':'轮播图片O3 宝贝页面地址,注意不是图片地址'}]"><img  style="width:1920px;height:500px;" alt="" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/1578214660/T2NP9kXdlcXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'data-ks-lazyload','desc':'轮播图片03的图片地址,尺寸为1920x500px'}]"></a></div>
<div><a href="http://lveshizhe.tmall.com" target="_blank" data-attr-replace="[{'type':'href','desc':'轮播图片O4 宝贝页面地址,注意不是图片地址'}]"><img  style="width:1920px;height:500px;" alt="" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/1578214660/T2If6mXk8XXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'data-ks-lazyload','desc':'轮播图片04的图片地址,尺寸为1920x500px'}]"></a></div></div><ul style="LINE-HEIGHT: 20px; WIDTH: auto; BOTTOM: 8px; HEIGHT: auto; LEFT: 575px" class=lst-trigger>
<li style="WIDTH: 187px; HEIGHT: 72px" class=current><img  style="MARGIN: 2px; WIDTH: 183px; HEIGHT: 68px"src="http://img02.taobaocdn.com/imgextra/i2/1578214660/T2KVHnXdNXXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'src','desc':'小图01的图片地址,尺寸为183x68px'}]" data-ks-lazyloaded="true"></li><li style="WIDTH: 187px; HEIGHT: 72px"><img  style="MARGIN: 2px; WIDTH: 183px; HEIGHT: 68px"src="http://img03.taobaocdn.com/imgextra/i3/1578214660/T2UABTXedeXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'src','desc':'小图02的图片地址,尺寸为183x68px'}]" data-ks-lazyloaded="true"></li><li style="WIDTH: 187px; HEIGHT: 72px"><img  style="MARGIN: 2px; WIDTH: 183px; HEIGHT: 68px"src="http://img04.taobaocdn.com/imgextra/i4/1578214660/T24mLmXfVXXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'src','desc':'小图03的图片地址,尺寸为183x68px'}]" data-ks-taobaocdn.com/imgelazyloaded="true"></li><li style="WIDTH: 187px; HEIGHT: 72px"><img  style="MARGIN: 2px; WIDTH: 183px; HEIGHT: 68px"src="http://img02.taobaocdn.com/imgextra/i2/1578214660/T2IDjmXftXXXXXXXXX-1578214660.jpg" data-attr-replace="[{'type':'src','desc':'小图04的图片地址,尺寸为183x68px'}]" data-ks-lazyloaded="true"></li></ul></DIV></DIV></DIV></DIV></DIV>

注意粘贴代码的时候 都要在代码模式下操作喔!这里就不提示了!有问题可以联系博主!


来源:飞蚂蚁模板网(QQ号:254206549),转载请保留出处和链接!

本文链接:http://www.feimayi.net/qtdm/948.html

加入【淘宝店铺装修】QQ群:474687967(加群验证:飞蚂蚁模板网)

淘宝天猫内部优惠券九元九特卖网一般人,我不告诉他喔!

<< 上一篇 下一篇 >>
飞蚂蚁特卖网

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

淘宝店铺装修教程 | 淘宝装修 | 淘宝装修免费模板 | 淘宝装修素材 | 淘宝店铺装修 | 网站地图 | 留言板 | 广告合作 |

Copyright(c)2013-2016feimayi.net All Rights Reserved. 粤ICP备14055454号
淘宝店铺装修交流群群号:474687967