淘宝设置全屏轮播图片代码

合集下载

淘宝自定义区图片切换滚动代码

络地址（我显示的图片都是在自己图片空间复制的地址）。
4、<A href="链接地址" target=_blank><IMG src="图片地址" width=96 border=0></A>可多次添加，需
要展示几个图片就复制粘贴几行代码（原代码是6张图） copyright
<MARQUEE scrollAmount=2 style="WIDTH: 509px; HEIGHT: 90px" behavior=alternate height=90
WIDHTH="96"> <A href="链接地址" target=_blank><IMG src="图片地址" width=96 border=0></A> <A
1、scrollAmount=2中数值随意调整，数值越小越慢；
copyright
2、WIDTH: 509px; HEIGHT: 90px中，509指图片滚动整个模块宽度，90指整个模块高度。根据实际需要情
况可改变，如下例中我的模块宽度为750（正好是整个自定义内容区宽度），高度150，可随意，合适即可
href="链接地址" target=_blank><IMG src="图片地址" width=96 border=0></A> <A href="链接地址"
target=_blank><IMG src="图片地址" width=96 border=0></A> <A BORDER="0"></A> <A href="链接地

淘宝图片轮播代码

刚刚接触淘宝网店，正在学习装修阶段，所以比较喜欢逛别人的网店，发现很多店内都有图片轮播版块（本人比较老土，刚开始不知道那个方式的图片滚动叫图片轮播！所以走了很多弯路）我就联系店铺的卖家，让他告诉我怎么做这个图片滚动，刚开始卖家以为我是买东西的，很热情的接待，听明白我不是买东西，只是求取代码的，直接不睬我！后来终于在群内，有个好心的高手，告诉我----那种图片下面有数字的切换的图片滚动叫做“图片轮播”并且把轮播代码发给了我，经过实验，在我地店铺内成功增加了“图片轮播”模块，为了让更多的新手能把自己的店装扮的靓靓的，我把“图片轮播”代码跟大家分享一下，代码如下：<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 style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll"><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>。

淘宝店铺大图轮播代码

淘宝多图轮换模板制作过程，这个模板的制作，要用到Photoshop和Adobe Flash ，制作过程比较复杂，一个模板做下来要几个小时！而且对于不懂PS和动画制作的朋友的确很难！没有基础的新手很不容易做出来！
下面我就将自己制作出来的模板代码发布出来供大家制作参考吧，这样比较简单一点，稍微懂点代码的朋友都可以做到！大家有什么不明白的可以旺我！

本篇文章来源于淘巧网Taoqao| 原文链接：/taobaodaxue/taobaozhuangxiu/20101101/7835.html
<ul>
<li><img alt="" src="/8/1.gif" /></li>
<li><img alt="" src="/8/2.gif" /></li>
<li><img alt="" src="/8/3.gif" /></li>
下面是该模板的代码：淘宝店铺促销区使用的三图轮换效果的代码。此代码仅适合淘宝店铺使用，因为代码用到了淘宝官方内核代码。代码简洁明了，易于使用。

<div style="width: 750px; height: 355px" class="slider-promo J_Slider">
</ul>
</div>
copyright
下面是该模板代码使用教程，淘巧网的促销模板代码使用也可以参照这个。淘—巧—网
1.登陆淘宝，选择“店铺装修”，在打开后的页面点击“装修页面”，选择添加模块，添加自定义内容：然后确定。本文来自淘巧网

淘宝、天猫装修全屏静态海报代码

<div style="height:海报高度px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"> <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;"></div></div></div>红色的地方按照你的具体情况修改就行了，然后在添加的自定义模块里面黏贴到源代码那里就可以了，希望能帮到你！！！集市店铺首页单张图片自定义模块全屏代码：（红色部分都可以更改）<div style="height:500px;width:1920px;"><div class="footer-more-trigger" style="width:1920px;height:500px;left:auto;top:auto;margin:0;padding:0;border:0;"> <div class="footer-more-trigger" style="top:auto;left:-485px;margin:0;padding:0;border:0;"><imgsrc="/imgextra/i2/2154817394/TB2iTUYaXXXXXceXpXXXXXXX XXX_!!2154817394.png" border="0" style="float:none;margin:0px;" /></div></div></div>集市店铺首页多张图片自定义模块全屏代码：（红色部分都可以更改）<div style="height:500px;width:1920px;"><div class="footer-more-trigger" style="width:1920px;height:500px;left:auto;top:auto;margin:0;padding:0;border:0;"> <div class="footer-more-trigger" style="top:auto;left:-485px;margin:0;padding:0;border:0;"><table width="1920" height="500" border="0" cellpadding="0" cellspacing="0"> <tbody><tr><td><imgsrc="/imgextra/i2/2154817394/TB2IxQ4aXXXXXXIXXXXXXXXX XXX_!!2154817394.png" width="485" height="250" alt="" /></td><td><imgsrc="/imgextra/i2/2154817394/TB2VGg3aXXXXXbrXpXXXXXXXXXX_!!2154817394.png" width="475" height="250" alt="" /></td><td><imgsrc="/imgextra/i3/2154817394/TB2XTg6aXXXXXamXXXXXXXX XXXX_!!2154817394.png" width="375" height="250" alt="" /></td><td><imgsrc="/imgextra/i3/2154817394/TB2EMU4aXXXXXa0XXXXXXXX XXXX_!!2154817394.png" width="585" height="250" alt="" /></td></tr><tr><td><imgsrc="/imgextra/i3/2154817394/TB2kX77aXXXXXXTXXXXXXXX XXXX_!!2154817394.png" width="485" height="250" alt="" /></td><td><imgsrc="/imgextra/i4/2154817394/TB2kEQUaXXXXXa.XpXXXXXXX XXX_!!2154817394.png" width="475" height="250" alt="" /></td><td><imgsrc="/imgextra/i3/2154817394/TB2pKU4aXXXXXXYXXXXXXXX XXXX_!!2154817394.png" width="375" height="250" alt="" /></td><td><imgsrc="/imgextra/i1/2154817394/TB2U5E7aXXXXXXFXXXXXXXX XXXX_!!2154817394.png" width="585" height="250" alt="" /></td></tr></tbody></table></div></div></div>天猫店铺首页多图片自定义模块全屏代码：（红色部分都可以更改）<div style="height:500px;"><div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;"><div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;"><table width="1920" height="500" border="0" cellpadding="0" cellspacing="0"> <tbody><tr><td rowspan="2"><img width="465" height="500" alt="" src="/imgextra/i1/2074411095/TB2DDE1aXXXXXa.XXXXXXXXX XXX_!!2074411095.png" /></td><td><img width="495" height="194" alt="" src="/imgextra/i3/2074411095/TB2vhs1aXXXXXcoXXXXXXXXX XXX_!!2074411095.png" /></td><td rowspan="2"><img width="496" height="500" alt="" src="/imgextra/i4/2074411095/TB2ZD30aXXXXXc3XXXXXXXXX XXX_!!2074411095.png" /></td><td rowspan="2"><img width="464" height="500" alt="" src="/imgextra/i1/2074411095/TB287wZaXXXXXXSXpXXXXXXX XXX_!!2074411095.png" /></td></tr><tr><td><img width="495" height="306" alt="" src="/imgextra/i2/2074411095/TB2hNE3aXXXXXbjXXXXXXXXX XXX_!!2074411095.png" /></td></tr></tbody></table></div></div></div>天猫首页单张图片自定义全屏代码：（红色部分都可以更改）<div style="height:500px;"><div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;"><div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;"><imgsrc="/imgextra/i4/2074411095/TB2Zv33aXXXXXcfXXXXXXXXX XXX_!!2074411095.png" alt=" 950全屏海报" /></div></div></div>--------------------------------------------------------------------------------------------------------------------<div style="height:4305px;"><div class="footer-more-trigger sn-simple-logo ks-switchable-panel-internal603"style="padding:0px;left:50%;top:auto;"><div class="footer-more-trigger sn-simple-logo ks-switchable-panel-internal603"style="padding:0px;left:-960px;top:auto;"><div style="width:1920px;">导出一切片代码放到这里{ 整个全屏首屏切好后 </table>到</table>的内容}</div></div></div></div>代码完结注：<div style="height:4305px;"> 这里的4305是高度要改成你导出来的高度尺寸"padding:0px;left:-960px;top:auto;"> 这里的960是宽度的一半，例：你的宽度是1900 那就要改成950 <div style="width:1920px;">这里的1920是宽度要改成你导出来的宽度尺寸悬浮导航代码：<div class="J_TWidget"data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-psm-shop-ww-hover','interval':0.1,'e ffect':'scrollx','activeIndex':1,'navCls':'user-bd11','contentCls':'user-hd11','autoplay':true}"data-widget-type="Carousel" style="position:relative;"><ul class="user-hd11" style="display:none;"><listyle="top:235px;width:200px;height:294px;right:50%;margin-right:505px;float:left;display:bloc k;">;</li></ul><ul class="user-bd11"><li style="left:80%;top:100px;width:200px;height:300px;margin-right:500px;"><table border="0" cellpadding="0" cellspacing="0" class="" width="200"><tbody><tr><td width="200"><p><img border="0"src="/imgextra/i2/395597533/T2QzXBX8BXXXXXXXXX-3955975 33.png" /></p></td></tr></tbody></table></li></ul></div>。

HTML5轮播图全代码

HTML5轮播图全代码轮播图原理⼤概是这样的，假定三张图⽚需要做轮播效果，⾸先需要将这三张图⽚并列放置，然后将这个整体并列向左移动，每当⼀张图⽚完整的从显⽰框⾛出，则将这张图⽚放置到最后⾯，循环往复就可以实现图⽚向左（或⼀个⽅向）移动。

然后，需要有两个定时器，⼀个定时器A控制三张图⽚整体左移速度，另⼀个定时器B控制每当⼀张完整的图⽚⾛进这个显⽰框就等待⼀到两秒得到更好的⽤户体验。

我这⾥⽤三个div框当作轮播图来演⽰。

在html的body中添加⼀个div作为显⽰框，然后在这个div内部添加三个⼦div作为图⽚显⽰。

代码如下：<div id="box"><div id="red" class="slide"></div><div id="green" class="slide"></div><div id="blue" class="slide"></div></div>头部添加css样式：此时⽹页中应该是有⼀个⿊⾊显⽰框div，内部有红、绿、蓝三个div框,三个框从上到下排列。

第⼀步，需要将三张图⽚都并列显⽰。

要实现将div挪动，且div⽐较⽅便控制每时每刻的位置(移动)，只能使⽤相对定位，且为⽅便，三个⼦div位置移动应该是相对box，所以box应该作为相对的参照点。

分别为box和slide代码添加position属性：#box{width:100px;height:100px;border:1px solid black;position:relative;}.slide{width:100px;height:100px;position:absolute;}为整个页⾯添加onload加载完成事件，当浏览器打开并加载完并⾃动执⾏事件中的代码块。

天猫轮播尺寸(天猫全屏轮播代码)

天猫轮播尺寸(天猫全屏轮播代码)
天猫作为国内电商平台的领军者，一直以来都秉持着为用户提供最优质的购物体验的理念。

而其中的一项关键举措，就是为商家提供了全屏轮播广告位。

这个轮播广告位不仅可以给商家提供更多的曝光机会，也可以为用户带来更加丰富的购物体验。

天猫全屏轮播广告位的尺寸是多少呢？其实这个问题并不好回答，因为天猫的界面设计一直在不断地优化和调整。

不过，一般情况下，天猫全屏轮播广告位的尺寸应该是1920*620像素。

当然，这个尺寸也会因为天猫的不断优化而有所变化。

那么，为什么天猫的全屏轮播广告位对于商家来说如此重要呢？首先，全屏轮播广告位的位置非常显眼，可以在用户进入天猫首页时第一时间展现给用户。

其次，全屏轮播广告位的尺寸非常大，可以让商家在轮播广告中展示更多的商品信息，吸引用户的注意力。

最后，全屏轮播广告位的展示效果非常好，可以让商家的品牌形象和产品形象得到更好的传播和宣传。

当然，想要在天猫的全屏轮播广告位上展示自己的广告并不是一件容易的事情。

商家需要考虑到很多因素，比如广告的设计、内容、形式等等。

同时，商家也需要花费大量的时间和精力去研究用户的兴趣和需求，以便能够更好地为用户提供服务。

只有做到了这些，商家才能够在天猫的全屏轮播广告位上获得更好的效果。

总之，天猫的全屏轮播广告位是商家们展示自己品牌形象和推广自己产品的重要途径。

虽然展示在这个广告位上并不容易，但只要商家能够认真研究用户需求、不断优化广告设计，就一定能够在这里获得更好的效果。

淘宝图片轮播代码渐变和上下效果代码

格式：
<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll">
<ul class=lst-main>
<li><A style="WIDTH: 200px; HEIGHT: 60px" href="商品链接地址" target=_blank><img alt="" src="图片地址"></A></li><li><A style="WIDTH: 200px; HEIGHT: 60px" href="商品链接地址" target=_blank><img alt="" src="图片地址"></A></li></ul></DIV>
<ul class=lst-main>

淘宝网店首页装修代码大集合+FLASH代码大全

淘宝网店免费装修代码大集合一、插入图片代码：<img src="图片链接地址" /> 注：先把图片上传到网络相册网络地址，把它拷贝下来，放到下边一串代码里替代汉字部分；可以代码里替代汉字部分；可以应用于公告栏、分类栏及宝贝描述内。

二、插入公告栏挂饰代码：<img src="图片链接地址" style="left:20px; position: relative; top:0px" /> 注：先把挂饰图片上传到网络相册；可以应用于公告栏、分类栏及宝贝描述内。

三、背景音乐代码：<bgsound loop="-1" src="音乐地址音乐地址"></bgsound> 注：先把挂饰图片上传到网络相册；可以应用于公告栏、宝贝描述内。

三、在图片里附加音乐的办法：三、在图片里附加音乐的办法：<img border=0 src="图片地址图片地址" dynsrc=音乐地址> 注：先把挂饰图片上传到网络相册；可以应用于公告栏、宝贝描述内。

四、浮动图片的代码：＜img alt="1" height="150" src="这里放图片地址"/＞五、悬浮挂饰代码：＜img src="这里放图片地址" style="left:20px; position: relative; top:0px" /＞六、文字链接代码:＜a href="网页地址"＞链接的文字＜/a＞七、移动文字代码:＜marquee＞从右到左移动的文字＜/marquee＞八、计数器代码<a href="" target="_blank"><img src="计数器地址"border=0 alt=""></a>九、店铺公告里的漂亮悬浮挂件的代码：<marquee style="position:relative;" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="1" scrolldelay="85" direction="up" behavior="scroll" height="60"> <img src="加入你自己的图片地址" />十、店铺公告添加个性的鼠标指针代码：<table style="CURSOR: url('上传后的鼠标指针的网址')"><tr><td> <table border="0" style="TABLE-LAYOUT: fixed">十一、宝贝描述加上个性的鼠标指针代码，然后复制以下代码：先选“编辑源文件” ，然后复制以下代码：<table width="100%" style="CURSOR: url('这里是已上传的鼠标指针网址')"> <tr> <td width="100%"> 另外，还要在源文件底部输入代码：</td></tr></table>十二、添加QQ在线交谈代码：<a target=blank href=/msgrd?V=1&Uin=41826029&Site=www.goodcup. &Menu=yes> <img border="0" SRC=/pa?p=1:41826029:7 alt="点击这里给我发消息"></a> 注: 这是QQ在线状态的代码，里面的数值要改变，号码和网址改为你自己的，这个链接的作用自己的，这个链接的作用是别人可以直接点击联系你而无需加你为好友，使用方法是直接链接。

淘宝店铺首页、效果装修代码(全)

淘宝装修代码(全)1.公告栏的装修图片代码,帖到公告栏就行了. 不过还是有好多人来问我公告栏的位置-----点我的淘宝-----管理我的店铺------基本设置，下面写着公告的位置。

<img src="图片的所在的地址"><img border="0" src="图片地址" />2.公告悬浮装饰图片代码COPY到公告的最下面就好了哦，<IMG style="right: 5px; BOTTOM: 0px; POSITION: relative" src=" 你图片的地址">3.加背景音乐的代码。

进“我的淘宝”点击“管理我的店铺”进入“基本设置” 先贴代码，再写你的公告文字<bgsound src="你的背景音乐地址" loop=-1>4.浮动的图片的代码：</td></tr></table>;<img height="150" src="图片地址"5.滚动字幕代码：这个用处可就多了，放到哪里那些字都是会动的，有很多朋友在好评里都会用到哦！ <marquee>输入你想说的话</marquee> 6.自定义颜色代码<font color=blue>输入你想要说的话</font>注意:等于号"="后就是颜色的英文：不喜欢这个颜色还可以换成其他颜色的，如：red(红)、blue(蓝)、green(绿)等；不过注意代码的总长度不要超过40哦。

7.增加链接链接内容<a href="链接地址">链接内容</a>8.店铺分类的代码<img src=" 图片的地址 " /> 代码就放在：我的淘宝—管理我的店铺—宝贝分类淘宝网店装修效果代码集合1、忽视右键<body oncontextmenu="return false">或<body style="overflow-y:hidden">2、加入背景音乐IE:<bgsound src="*.mid" loop=infinite>NS:<embed src="*.mid" autostart=true hidden=true loop=true> </embed>*.mid你的背景音乐的midi格式文件3、简单的window.open方法<a href="#"onclick="javascript:window.open(文件路径/文件名,newwindow, toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,width=400,height=300);">文字或图片</a>参数解释：<SCRIPT LANGUAGE="javascript"> js脚本开始；window.open 弹出新窗口的命令；文件路径/文件名弹出窗口的文件名；newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替；width=400 窗口宽度；height=300 窗口高度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。

淘宝店铺基础版全屏代码

基础版（750+190）全屏海报代码<div style="height:600px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"><div class="footer-more-trigger" style="left:-860px;top:auto;border:none;padding:0;"><a href="#" style="width:1920px;height:600px;display:block;" target="_blank"> <img alt="全屏海报" border="0" src="图片地址" /></a></div></div></div>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝基础版（190+750）全屏海报代码<div style="height:600px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"><div class="footer-more-trigger" style="left:-1060px;top:auto;border:none;padding:0;"><a href="#" style="width:1920px;height:600px;display:block;" target="_blank"> <img alt="全屏海报" border="0" src="图片地址" /></a></div></div></div>。

淘宝首页完整全屏代码

淘宝店铺装修模板图片轮播代码

淘宝店铺装修模板图片轮播代码店铺装修模板图片轮播代码是一款能够美化店铺装修，吸引客户注意力，激发购买热情，提高宝贝转化率的产品。

该产品分为A款、B款、C款三种，每款都包含左右滚动、上下滚动、渐变三种效果代码。

其中，A款左右滚动代码如下：div style="" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls':'lst-main','navCls':'lst-trigger','activeTriggerCls':'current'}" data-widget-type="Slide"> ul class="lst-main">li>a style="" href="/" target="_blank">img src="" alt="图片1">a>li>li>a style="" href="/" target="_blank">img src="" alt="图片2">a>li>ul>div>以上是A款左右滚动代码演示，使用该代码能够为店铺增添不少美观度，同时吸引客户的注意力，提高宝贝转化率。

把图片轮播代码粘贴进去，点击保存即可。

使用图片轮播功能可以让店铺更加生动有趣，吸引更多的顾客。

全屏海报代码

<div style="height:海报高度px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"> <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;"><a href="链接地址" target="_blank"><img src="海报在图片空间的地址" width="1920px" height="海报高度px" border="0" /></a></div></div></div>红色的地方按照你的具体情况修改就行了，然后在添加的自定义模块里面黏贴到源代码那里就可以了，希望能帮到你！！！/imgextra/i3/433585622/TB24dEuaFXXXXaIXXXXXXXXXXXX_! !433585622.jpg<div style="height:639px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"> <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;"><ahref="/item.htm?spm=a1z10.1.w5003-3960774529.1.Z068Eq&id=2030779 8891&scene=taobao_shop" target="_blank"><imgsrc="/imgextra/i3/272934966/T2gduDXAdaXXXXXXXX_!!2729349 66.png " width="480px" height="639px" border="0" /></a><ahref="/item.htm?spm=a1z10.1.w5003-3960774529.2.Z068Eq&id=2258864 7659&scene=taobao_shop" target="_blank"><imgsrc="/imgextra/i2/272934966/T23YOLXqXXXXXXXXXX_!!27293 4966.png " width="480px" height="639 px" border="0" /></a><ahref="/item.htm?spm=a1z10.1.w5003-3961413180.1.Z068Eq&id=2258937 5574&scene=taobao_shop" target="_blank"><imgsrc="/imgextra/i2/272934966/T22OB7XsdXXXXXXXXX_!!272934 966.png" width="480px" height="639px" border="0" /></a><ahref="/item.htm?spm=a1z10.1.w5003-3961413180.2.Z068Eq&id=1928977 6596&scene=taobao_shop" target="_blank"><imgsrc="/imgextra/i3/272934966/T2csyCXp4XXXXXXXXX_!!2729349 66.png" width="480px" height="639px" border="0" /></a></div></div></div><div style="height:344px;width:1920px;"><div class="footer-more- trigger"style="width:1920px;height:364px;left:auto;top:auto;margin:0;padding:0;border:0 ;"><div class="footer-more-trigger"style="left:-485px;top:-20px;margin:0;padding:0;border:0;"><ahref="/item.htm?spm=a1z10.3.w4002-5114819895.23.tiev41&id =36581499806&scene=taobao_shop" target="_blank"><imgsrc="/imgextra/i4/1927022064/T2qK7RXjRaXXXXXXXX-19270 22064.jpg" /></a></div></div></div>说明：这张图片上364像素高，模块之间间隙是10PX，两个模块间隙就是20PX，所以，修改代码，中的top:-20PX（主要修改这个参数，-30，-40自己可以试试调节）,天猫一般是-10PX，根据实际情况，有的是-10PX，有的需要是-20px,然后再修改，把原本高度为height:364PX;，修改为height:344px;。

天猫淘宝全屏代码的使用方法(附全屏代码)

天猫全屏页面图文教程第一步当然是给代码了，这个是我用的代码，图片和衔接也都是我的，大家可以复制在DW里打开直接更换。

<div class="J_TWidget mypoperpAAmyDpr" data-widget-config="{'effect': 'fade','circular':true ,'contentCls':'sj-tpAAmyDpr','navCls':'sj-npAAmyDpr','autoplay':'true'}" data-widget-type="Tabs"style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;height:5527px;overflow:hidden;padding-top:0px;"><div class="sj-tpAAmyDpr"><div class="J_TWidget" data-widget-config="{'contentCls': 'sj-contentpAAmyDpr','navCls': 'sj-npAAmyDpr','triggerType':'click','effect': 'fade','steps':1 ,'autoplay': true,'circular':true ,'prevBtnCls':'prev1pAAmyDpr','nextBtnCls':'next1pAAmyDprpAAmyDpr'}" data-widget-type="Carousel"><div class="pa2"><ul class="sj-contentpAAmyDpr"style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:5527px;overflow:hidden;padding-top :0px;"><listyle="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:1920px;padding-right:0px;padding-top:0px;left :-485px;top:-20px;"><table border="0" cellpadding="0" cellspacing="0" class="" height="0" width="1920"><tbody><tr><td><img border="0" height="363" src="/imgextra/i2/1645086116/T27z1nXwtaXXXXXXXX_!!1645086116.jpg" width="1920" /></a></td></tr><tr><td><img border="0" height="356" src="/imgextra/i3/1645086116/T2aBmEXwFaXXXXXXXX_!!1645086116.jpg"style="float:none;margin:0px;" width="1920" /></a></td></tr><tr><td><img border="0" height="177.76" src="/imgextra/i3/1645086116/T2b8yeXD0XXXXXXXXX_!!1645086116.jpg" style="float:none;margin:0px;" width="1920" /></a></td></tr><tr><td><img src="/imgextra/i2/1645086116/T2JL9pXCFXXXXXXXXX_!!1645086116.jpg" width="1920" height="700.44" border="0" usemap="#dfsafasdasfsdf" /></td></tr><tr><td><img src="/imgextra/i4/1645086116/T2bRuSXB4XXXXXXXXX_!!1645086116.jpg" width="1920" height="809.13" border="0" usemap="#adsfsdfdfdahzzcv" /></td></tr><tr><td><img border="0" height="743.66" src="/imgextra/i1/1645086116/T2W5ixXtpaXXXXXXXX_!!1645086116.jpg" usemap="#sdfsdfwetq" width="1920" /></td></tr><tr><td><img src="/imgextra/i4/1645086116/T2wxmsXwBaXXXXXXXX_!!1645086116.jpg" width="1920" height="774.50" border="0" usemap="#Mapsdfaewqr" /></td></tr><tr><td><img border="0" height="749" src="/imgextra/i4/1645086116/T2Eb5pXl8cXXXXXXXX_!!1645086116.jpg" usemap="#ewrqewqrtyjkkwq" width="1920" /></td></tr><tr><td><img src="/imgextra/i4/1645086116/T2pxMfXhRbXXXXXXXX_!!1645086116.jpg" width="1920" height="804.63"border="0" usemap="#asdfsdfasfs" /></td></tr></tbody></table></ul></div>第二步将这段代码放入DW代码模式，第三步这部分设置页面大小的部分，从图上看，我的页面是5527的高度，（划红色圈），这里可以更改成你的页面大小。

淘宝店铺装修的图片轮播代码怎么弄

大家可能在逛淘宝的时候经常看到一些大店铺里，首页有一些论坛促销图片，看了很是眼红，自己又不太会弄，因为这些图片轮播代码是涉及到代码应用的，对于新手来说还是有一点难度的，所以今天给大家介绍一下图片论坛代码怎么写，无论是扶植版还是旺铺都可以使用哦。

此代码适合图片尺寸为750*400像素大小的图片。

图片可以上传到淘宝图片空间后就有图片地址了，或者上传到外面购买的一些图片空间，不建议大家使用免费空间，打开速度慢而且不稳定。

操作步骤：
1、先进入“我是卖家”——左侧“店铺管理”——“店铺装修”；
2、把页面拉到最底下，交流区下面显示“在此处添加新模块”——左键单击——添加“自定义内容区”——“编辑”——单击此符号“<->”显示源码——再把复制好的代码粘贴；
3、把自己做好的3张轮播广告图上传到图片空间，尺寸750*400，选择“通用上传”，再在图片空间中打开图片，右侧“复制”地址；
4、把代码中的中文，替换为相应的图片地址和宝贝链接地址，千万不要弄错哦。

想做几张就做几张，代码<li>……</li>部分复制，放在倒数第二行即可。

5、全部弄好后，点击“保存”——右上角“发布”就大功告成了，别看我文字写这么多，其它操作起来很简单哦，一定要有耐心坚持看完哦！
内容来源/tbdaxue/a/wszx/20121226/113864.html。

淘宝店铺装修轮播代码

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style type="text/css">.flash{width:950px; height:400px; position:relative;overflow:hidden;}.flash .scroll{width:1000%;height:400px;background:#333333;position:absolute;}.flash .scroll img{width:950px;height:400px;float:left;}.flash .but{width:330px;height:60px;position:absolute;position:absolute;margin:340px 310px 0px;}.flash .but img{width:100px;float:left;margin:0px 2px;border:2px solid #babfc5;}</style></head><body><div class="flash"><div class="scroll"><img src="image/2.jpg"/><img src="image/3.jpg"/><img src="image/4.jpg"/></div><div class="but"><img src="image/2.jpg" class="bar" style="border:1px solid #cc0000;"/><img src="image/3.jpg"/><img src="image/4.jpg"/></div></div></body></html>。

淘宝全屏海报轮播图代码

<div class="skin-box-bd clear-fix"><span><div class="J_TWidget" data-widget-config="{" data-widget-type="Tabs" ,?navCls?:?toseise?,?activeTriggerCls?:?odslos?,?contentCls?:?piaofu?} ?="" true="" ?fade?,=""><div style="height: 550px;" class="piaofu"><div style="margin: 0px; padding: 0px; left: -485px; top: 0px; width: 1920px; z-index: 10;" class="J_TWidget" data-widget-config="{ " data-widget-type="Carousel" }?="" true="" true,			?viewSize?:[1920],=""1,="" ?scrollx?,			?prevBtnCls?:?prev?,	& #9;	?nextBtnCls?:?next?,="" ?mouse?,="" ?slide-kun136289983020 9triggers?,="" ?slide-kun1362899830209content?,=""><div style="display: none;" class="J_TWidget" data-widget-config="{" data-widget-type="Popup"trigger?:?.first-trigger2?,?align?:{?node?:?.first-trigger2?,?offset?:[0,0],?points?:[?cc?,?cc?]}}?=" "><div style="width: 90px; height: 90px; float: left;" class="prev"><imgsrc="/imgextra/i3/60358248/T2pl9yXRXXXXXXXXXX-60358248.j pg" /></div><div style="width: 90px; height: 90px; margin-left: 950px;" class="next"><imgsrc="/imgextra/i3/60358248/T2xZWyXJFaXXXXXXXX-60358248.j pg" /></div></div><div style="margin: 0px; padding: 0px; width: 1920px; height: 570px; overflow: hidden;" class="first-trigger2"><ul style="margin: 0px; padding: 0px; width: 1920px; height: 570px;" class="slide-kun1362899830209content"><li style="margin: 0px; padding: 0px; width: 1920px; height: 650px; list-style-type: none;"><a style="margin: 0px; padding: 0px;" target="_blank"><img border="0" width="1920" height="570" src="/imgextra/i4/1612642734/TB2knIIaVXXXXaqXXXXXXXXXX XX_!!1612642734.jpg" /></a></li><li style="margin: 0px; padding: 0px; width: 1920px; height: 650px; list-style-type: none;"><a style="margin: 0px; padding: 0px;" target="_blank"><img border="0" width="1920" height="570"src="/imgextra/i3/1612642734/TB2hx.uaVXXXXcMXpXXXXXXX XXX_!!1612642734.jpg" /></a></li><li style="margin: 0px; padding: 0px; width: 1920px; height: 650px; list-style-type: none;"><a style="margin: 0px; padding: 0px;" target="_blank"><img border="0" width="1920" height="570" src="/imgextra/i1/1612642734/TB2uIAGaVXXXXa6XXXXXXXXX XXX_!!1612642734.jpg" /></a></li></ul></div></div></div></div></span></div>其中黄色部分为左右箭头图地址红色部分为要需要显示的图片地址注：只适用于淘宝系统模板中简约时尚，否则会显示不正常。

淘宝店铺全屏轮播模版代码

<ul class="QdotcontentgMkloy clearfix" style="top: 0px; position: absolute;z-index:9;width:999999px;">
<li style="list-style-type:none;margin:0px;padding:0px;width:1920px;height:600px;float:left;">
</div></div></div></div></div></div>
ccg3特效
可惜发不了图，为了避免广告嫌疑，就不发店铺地址展示效果啦，大家可以把代码放到自己店铺里装修下
HTML：
</div>

</li>
</ul>
</div>
</div>
</div>
</div>
</div> .shiyan_lsm{background:url(/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) 0px 0px no-repeat;}.shiyan_lsm:hover{background:url(/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) -40px 0px no-repeat;}.shiyan_lsm .shiyan_lsm01{left:1000px;top:200px;background:url(/imgextra/i2/686821827/TB2YupFaXXXXXbKXpXXXXXXXXXX_!!686821827.png) no-repeat;}.shiyan_lsm:hover .shiyan_lsm01{left:950px;top:200px;}.shiyan_lsm .shiyan_lsm02{left:300px;top:180px;background:url(/imgextra/i3/2036609075/TB2PEHxaFXXXXayXXXXXXXXXXXX_!!2036609075.png) no-repeat;}.shiyan_lsm:hover .shiyan_lsm02{left:450px;top:180px;}.shiyan_lsm .shiyan_lsm03{left:1200px;top:180px;background:url(/imgextra/i1/2036609075/TB2i.bqaFXXXXa0XpXXXXXXXXXX_!!2036609075.png) no-repeat;}.shiyan_lsm:hover .shiyan_lsm03{left:1300px;top:180px;}.shiyan_lsm .shiyan_lsm04{left:1200px;top:550px;background:url(/imgextra/i4/686821827/TB2uXFHaXXXXXaSXpXXXXXXXXXX_!!686821827.png) no-repeat;}.shiyan_lsm:hover .shiyan_lsm04{left:1300px;top:550px;}.shiyan_lsm{background:url(/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) 0px 0px no-repeat;}

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
<div class="skin-box-bd clear-fix">
<span><DIV class=J_TWidget data-widget-type="Tabs"
data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">
<DIV style="HEIGHT: 585px" class=piaofu>
<DIV
style="Z-INDEX: 0; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px; LEFT: -485px"
class=sltent>
<LI
style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 600px; PADDING-TOP: 0px"><A
height=600></A></LI>
</UL></DIV>
</DIV></DIV></DIV>
</span>
</div>
这是全代码开头的一段 'effect': 'scrollx',这一段最后的红色背景部分的，scrollx是可以改动的。
'nextBtnCls':'next',
'steps': 1,
'autoplay': true,
'viewSize':[1920],
'circular': true
}">
<DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup"
style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
height=600></A></LI>
<LI
style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 600px; PADDING-TOP: 0px"><A
data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">
<DIV style="WIDTH: 90px; FLOAT: left; HEIGHT: 90px" class=prev><IMG
style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
class=J_TWidget data-widget-type="Carousel"
data-widget-config="{
'contentCls': 'slide-kun1362899830209content',
'triggerCls': 'slide-kun1362899830209triggers',
class=first-trigger2>
<UL
style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 600px; PADDING-TOP: 0px"
src="左点击"></DIV>
<DIV style="WIDTH: 90px; HEIGHT: 90px; MARGIN-LEFT: 950px" class=next><IMG
src="右点击"></DIV></DIV>
<DIV
style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 600px; OVERFLOW: hidden; PADDING-TOP: 0px"
height=600></A></LI>
<LI
style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 600px; PADDING-TOP: 0px"><A
fade是渐隐式的轮播，改成scrollx就是水平滚动的轮播，改成scrolly就是垂直滚动的轮播。
其中这段代码中的height是高度，可以改动的，那高度的数据是根据你做的海报的高度而定的。
'navCls': 'slide-kun1362899830209triggers',
'triggerType': 'mouse',
'effect': 'scrollx',
'prevBtnCls':'prev',