建站虽易运营不易,且阅且珍惜!

淘宝全屏代码

技术 微风里的红叶 1019℃ 0评论

(一)一张图片实现的淘宝全屏海报代码效果预览

一张图片实现的全屏图片代码淘宝全屏海报代码

(二)单图淘宝全屏图片全屏海报图片代码(范例代码) 海报图片尺寸2200×560

<div style=”height:560px;”>
<div class=”footer-more-trigger” style=”left:50%;top:auto;border:none;padding:0;”>
<div class=”footer-more-trigger” style=”left:-1100px;top:auto;border:none;padding:0;”>

<a href=”http://shop57988233.taobao.com” target=”_blank”>
<img src=”
http://img03.taobaocdn.com/imgextra/i3/699022961/T26F6eXAVXXXXXXXXX-699022961.jpg” width=”2200px” height=”560px” border=”0″ />
</a>

</div>
</div>
</div>
 

(三)一张图片的全屏图片代码(淘宝全屏海报代码)格式

<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:-宽度值一半px;top:auto;border:none;padding:0;”>

<a href=”链接地址” target=”_blank”>
<img src=”图片地址” width=”宽度px” height=”高度px” border=”0″ />
</a>

</div>
</div>
</div>
(四)代码修改说明

需将代码中的高度替换为自己实际的海报图片高度,宽度修改时间的全屏海报图片宽度,替换编辑链接地址,图片地址,和宽度值一半的值(这个值为宽度的一半,实现居中对齐的功能)

 

全屏轮播代码

<div class=”main” style=”background:#FFF;height:600px;”>
<div class=”footer-more-trigger” style=”padding:0px;border:0;top:auto;width:1920px;height:600px;z-index:99;left:50%;”>
<div class=”footer-more-trigger” style=”padding:0px;border:0;top:auto;width:1920px;height:600px;z-index:99;left:-50%;”>
<div class=”footer-more-trigger” style=”left:0;top:auto;padding:0px;border:0;width:1920px;height:600px;”>
<div class=”J_TWidget” data-widget-config=”{
‘contentCls’: ‘slide-kun533601433content’,
‘triggerCls’: ‘slide-kun533601433triggers’,
‘navCls’: ‘slide-kun533601433triggers’,
‘triggerType’: ‘mouse’,
‘effect’: ‘scrollx’,
‘easing’: ‘backOut’,
‘prevBtnCls’:’prev’,
‘nextBtnCls’:’next’,
‘steps’: 1,
‘autoplay’: true,
‘duration’: 1,
‘viewSize’:[1920],
‘interval’:5,
‘circular’: true
}” data-widget-type=”Carousel” style=”z-index:10;top:0px;padding:0px;margin:0px;width:1920px;”>
<div class=”J_TWidget footer-more-trigger” data-widget-config=”{‘trigger’:’.first533601433trigger’,’align’:{‘node’:’.first533601433trigger’,’offset’:[0,0],’points’:[‘cc’,’cc’]}}” data-widget-type=”Popup” style=”left:0px;padding:0px;width:1920px;border:0px none;display:block;z-index:9999;top:255px;visibility:hidden;”>
<div class=”prev” style=”width:90px;float:left;cursor:pointer;margin-left:465px;height:90px;”>
<img src=”http://img02.taobaocdn.com/imgextra/i2/30446694/T27cR0X4FXXXXXXXXX-30446694.png” /></div>
<div class=”next” style=”width:90px;height:90px;float:right;cursor:pointer;margin-right:465px;”>
<img src=”http://img02.taobaocdn.com/imgextra/i2/30446694/T2shhYX04aXXXXXXXX-30446694.png” /></div>
</div>
<div class=”first533601433trigger” style=”height:600px;width:1920px;overflow:hidden;padding:0px;margin:0px;position:relative;”>
<ul class=”slide-kun533601433content” style=”height:600px;width:3840px;padding:0px;margin:0px;”>
<li style=”width:1920px;height:600px;padding:0px;margin:0px;list-style-type:none;display:block;float:left;”>
<a href=”图片连接地址” style=”padding:0px;margin:0px;” target=”_blank”><img border=”0px” height=”600px” src=”图片地址” width=”1920px” /> </a></li>
<li style=”width:1920px;height:600px;padding:0px;margin:0px;list-style-type:none;display:block;float:left;”>
<a href=”图片连接地址” style=”padding:0px;margin:0px;” target=”_blank”><img border=”0px” height=”600px” src=”图片地址” width=”1920px” /> </a></li>
</ul>
</div>
<ul class=”slide-kun533601433triggers” style=”padding:0px;margin:0px;display:none;”>
<li class=”ks-active”>
&nbsp;</li>
<li>
&nbsp;</li>
</ul>
</div>
</div>
</div>
</div>
</div>

红叶

转载请注明:红叶 » 淘宝全屏代码

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址