淘宝通栏海报代码-求淘宝通栏图片轮播代码，包含js，css，html，类似下图，求各路大神。

1.首先,你需要根据你售卖的商品,在晚上寻找一张合适的图片,如图,在百度上搜索“淘宝1920海报”,选择宽度为1920px的图片并保持至桌面

2.然后利用,

美图秀秀

对图片进行处理,添加想要的文字,消除多余的图片,添加新图片(这里就不详细解说了),然后将图片上传至淘宝的图片空间备用

3.点击“添加模块”按钮,添加一个自定义模块区

4.在点击自定义模块区的“编辑”按钮,进入编辑对话框,点击如下图所示的按钮

5.在弹出的对话框中,找到你刚刚上传的图片,并点击“插入”按钮

6.插入后,点击如下图所示按钮,并在对话框中输入全盘海报的代码,代码如下:

<div style="height:550px;">

<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 target="_blank"> <img src="

!!" width="1920px" height="500px" border="0" /> </a>

</div>

</div>

</div>

注:由于版式的原因,此处代码空格被消除了,如需完整代码,请自行百度搜索

7.注意,加粗字体处1为你刚刚上传图片的地址,在点击一张图片后,点击如下图按钮即可复制图片地址,加粗字体处2为你需要调节的该图片的高度,具体数字根据实际情况调节

注意事项

代码出加粗的地方,在使用时需要还原字体,

搜索的图片宽度一定要为1920px 否则在后期显示时会出现很多问题

用工具生成方便简单,我用疯狂的美工装修暂时给你生成一个,拿走不谢

<div  style="height:480px">

     <div   data-title="本代码由疯狂的美工装修助手自动生成"   class="TWidgst474taigyer footer-more-trigger  sn-simple-logo most-footer  mgzxzs_qpdm" style="width:1920px;height:500px;padding:0;left:50%;top:auto;border:0px solid red;background:none;z-index:2;">

          <div class="TWidgst474taigyer footer-more-trigger  sn-simple-logo most-footer" style="width:1920px;height:500px;padding:0;left:-50%;top:-0px;border:0px solid red;background:none;overflow: hidden;">

               <div style="width:1920px;margin:0 auto;background: url() no-repeat top center fixed;"><div data-title="本代码由疯狂的美工装修助手生成"  class="J_TWidget" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','interval':4,'navCls':'crazy_navbmefjl137aei','contentCls':'crazy_contentbmefjl137aei','prevBtnCls':'mall-prevbmefjl137aei','autoplay':true,'nextBtnCls':'mall-nextbmefjl137aei','circular':true,'disableBtnCls':'disable','duration':2.0,'activeTriggerCls':'hidden','delay':0.1}" data-widget-type="Carousel" style=" background: none; cursor: auto; display: block;z-index:30;margin:0;padding:0;border:0;left:auto;top:auto;right:auto;width:1920px;height:500px;">

<div class="crazy_kuangbmefjl137aei " style=" background: none; cursor: auto; display: block;z-index:30;width:1920px;height:500px;margin:0;padding:0;border:0;left:0px;top:0px;right:auto;overflow:hidden;">

<div   data-title="本代码由疯狂的美工装修助手生成"  class=" freeze-layer footer-more-trigger  footer-more most-footer  sn-simple-logo crazynav" style=" background: none; cursor: auto; display: block;width:990px;height:1px;text-align:center;left:465px;top:185px;margin:0;padding:0;border:0;z-index:99;">

<div class="J_TWidget mall-prevbmefjl137aei" data-widget-config="{&quot;trigger&quot;:&quot;.mgzxzs_bmefjl137aei&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.mgzxzs_bmefjl137aei&quot;,&quot;offset&quot;:[-495,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display:none;">

<div class="mall-prevbmefjl137aei" style="font-size:100px;cursor:pointer;">

 <img src="" />

</div>

</div>

<div class="J_TWidget mall-nextbmefjl137aei" data-widget-config="{&quot;trigger&quot;:&quot;.mgzxzs_bmefjl137aei&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.mgzxzs_bmefjl137aei&quot;,&quot;offset&quot;:[495,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display:none;">

<div class="mall-nextbmefjl137aei" style="font-size:100px;cursor:pointer;">

 <img src="" />

</div>

</div>

</div>

<div style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="mgzxzs_bmefjl137aei">

<ul class="crazy_contentbmefjl137aei" style="z-index:30;">

 <li style="width:1920px;height:500px;display:block;"><a href="/" target="_blank"><img src="" /></a></li>   <li style="width:1920px;height:500px;display:block;"><a href="/" target="_blank"><img src="" /></a></li>   <li style="width:1920px;height:500px;display:block;"><a href="/" target="_blank"><img src="" /></a></li>  

</ul></div>

<div class=" freeze-layer footer-more-trigger  footer-more most-footer  sn-simple-logo" style=" background: none; cursor: auto; display: block;width:100%;height:auto;margin:0;padding:0px;border:0;top:auto;left:auto;right:auto;bottom:0px;z-index:35;">

<ul style="text-align:center;padding:5px;width:100%;">

<li style="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px 0px 5px 10px;background:url(">&nbsp;</li>

<li style="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px 0px 5px 10px;background:url(">&nbsp;</li>

<li style="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px 0px 5px 10px;background:url(">&nbsp;</li>

</ul>

</div>

<div class=" freeze-layer footer-more-trigger  footer-more most-footer  sn-simple-logo" style=" background: none; cursor: auto; display: block;width:100%;height:auto;margin:0;padding:0px;border:0;top:auto;left:auto;right:auto;bottom:0px;z-index:36;">

<ul class="crazy_navbmefjl137aei" style="text-align:center;padding:5px;width:100%;">

<li style="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px 0px 5px 10px;background:url(">&nbsp;</li>

<li style="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px 0px 5px 10px;background:url(">&nbsp;</li>

<li style="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px 0px 5px 10px;background:url(">&nbsp;</li>

</ul>

</div>

</div></div>

          </div>

     </div>

</div>

用firefox的 firebug插件查看元素,可以找到css,html的源代码。用js操作动画的代码实现的方式不同。

简单的思路:把三张图P到一起,设置成背景,假如每张图width:600px,用JS控制每1500毫秒(1.5秒)width增加600px,当width=1800px 设置width=600。