回首页
当前位置: 主页 > 网店装修 >

淘宝新旺铺全屏轮播教程+1920大图代码

分享到:
时间:2013-06-24 23:57来源:未知 作者:admin 点击:

收集提供给大家2013版淘宝新旺铺全屏轮播教程和1920大图的轮播代码(限制于专业版旺铺使用),普通版的旺铺的轮播图片尺寸说明:

 

 

图片轮播的具体尺寸与店铺具体布局有关。

 

图片高度:可根据卖家需要自行设定。

 

图片宽度:通栏布局:图片轮播通栏宽度为950px

两栏布局: 左侧栏为190px

                           右侧栏为750px


专业版旺铺可以使1920px尺寸的全屏大图轮播。下面是专业版1920大图全屏轮播代码,子雨我测试过了可以使用,你只需要修改代码中的红色文字就可以了。

 

 

<DIV class=J_TWidget data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}" data-widget-type="Tabs">
<DIV style="HEIGHT: 477px" class=piaofu>
<DIV style="Z-INDEX: 10; WIDTH: 1920px; HEIGHT: 500px; TOP: 150px; LEFT:0px" class=J_TWidget data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','steps':1,'autoplay':'ture','viewSize':[1920],'circular':false,'prevBtnCls':'prev','nextBtnCls':'next','disableBtnCls':'disable','lazyDataType':'img-src'}" data-widget-type="Carousel">
<DIV style="DISPLAY: none" class=J_TWidget data-widget-config="{&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10; 'trigger':'.first-trigger2',&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10; 'align':{&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10; 'node':'.first-trigger2',&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10; 'offset':[-80,0],&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10; 'points':['cc','cc']&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10; }&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10; }" data-widget-type="Popup">
<DIV style="WIDTH: 45px; FLOAT: left; HEIGHT: 83px" class="scroller-prev prev"><img src="http://www34.tx8cdn.com/photo/swfjay/201262922128563.PNG"></DIV>
<DIV style="WIDTH: 45px; HEIGHT: 83px; MARGIN-LEFT: 950px" class="next scroller-next"><img src="http://www34.tx8cdn.com/photo/swfjay/201262922129486.PNG"></DIV></DIV>
<DIV style="WIDTH: 1920px; HEIGHT: 500px" class="scrollerx first-trigger2">
<DIV style="WIDTH: 1920px; FLOAT: left; HEIGHT: 500px" class=ks-switchable-content>
<DIV style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 1920px; PADDING-RIGHT: 0pt; DISPLAY: block; FLOAT: left; PADDING-TOP: 0pt"><img  style="MARGIN: 0px; WIDTH: 1920px; FLOAT: none; HEIGHT: 500px"alt="" src="轮播图片地址1"></DIV>
<DIV style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 1920px; PADDING-RIGHT: 0pt; DISPLAY: block; FLOAT: left; HEIGHT: 500px; PADDING-TOP: 0pt"><img  style="MARGIN: 0px; WIDTH: 1920px; FLOAT: none; HEIGHT: 500px"alt="" src="轮播图片地址2"></DIV>
<DIV style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 1920px; PADDING-RIGHT: 0pt; DISPLAY: block; FLOAT: left; HEIGHT: 500px; PADDING-TOP: 0pt"><img  style="MARGIN: 0px; WIDTH: 1920px; FLOAT: none; HEIGHT: 500px"alt="" src="轮播图片地址3"></DIV>
<DIV style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 1920px; PADDING-RIGHT: 0pt; DISPLAY: block; FLOAT: left; HEIGHT: 500px; PADDING-TOP: 0pt"><img  style="MARGIN: 0px; WIDTH: 1920px; FLOAT: none; HEIGHT: 500px"alt="" src="轮播图片地址4"></DIV>
</DIV></DIV></DIV></DIV></DIV>

 

轮播图片地址:就是你要展示的海报轮播图片的url地址,例如图片空间中的图片链接;

 


图片的链接地址:即海报轮播图片点击链接指向的宝贝/自定义页面等地址,即具体的展示地址;


轮播代码中的图片格式是正确,但是提示”格式错误“的问题解决方法?


已优化设计产品设计并上线,不会在出现此类问题(原问题是原来图片轮播默认有2张图片。默认两张图片填充需完整。两个图片地址/链接地址填充完毕问题即可解决)

 



 

1.如何编辑图片轮播?首先进入店铺后台 可以点击“编辑”按钮再选择“添加模块”按钮,点击添加图片轮播:

 

 

 

 

 

 

 

2.点击图片图标 可以插入图片空间图片:

 

 

 

 

3.点击选择 然后插入图片空间图片:

 

 

 

4.可以在“操作”阶段进行调整/删除 也可以添加新图片:

 

 

 

 

 

5.可以在“显示设置”进行进一步的调整

 

注意:新旺铺专业版通栏宽度为950px/左侧栏为190px/右侧栏为750px/

 

           新旺铺基础版左侧栏为190px/右侧栏为750px/

              

 

 

 

 

 

最后别忘记“保存”哟!

·新手想开女装、鞋子、化妆品网店可点此向双皇冠卖家咨询


------分隔线----------------------------


推荐内容
优秀装修模板