当前位置: 首页 > 技术分享, 网络文摘 > 正文

网店全屏代码

 

 

 

店铺的全屏海报效果能为店铺装修锦上添花,增加店铺的美观感。许多卖家一直苦苦纠结如何不用花钱买模板也能实现全屏海报的效果呢?今天我就将这个简单的方法教给大家。

 

网络上有很多的全屏海报代码,但并不是都有效。楼主找到了一段经过测试可以试用的代码。天猫商城的(1920*500)尺寸的轮播海报代码。下面分享给大家。

ca5257540923dd5469b7d173d309b3de9d8248a1

 

 

<div data-widget-config=”{‘effect’: ‘fade’, ‘circular’: true ,’contentCls’:'bslide_cAFTq’}” data-widget-type=”Tabs”>

<div class=”bslide_cAFTq” style=”height:630px;”>

<div class=”J_TWidget” data-widget-config=”{‘navCls’:'scroller-nav’,'contentCls’:'scroller-content’,'steps’:1,’prevBtnCls’: ‘prev’,'nextBtnCls’: ‘next’,'disableBtnCls’: ‘disable’,

 

 

‘circular’:true,

 

 

‘effect’:'scrollx’,

 

 

‘easing’:'easeOut’,

 

 

‘duration’:1.0,

 

 

‘interval’:’4′,

 

 

‘autoplay’:true}” data-widget-type=”Carousel” style=”height:610px;width:1920px;left:-485px;top:0;”>

<div class=”J_TWidget” data-widget-config=”{‘trigger’:’.bslide_cAFTq’,'align’:{‘node’:’.bslide_cAFTq’,'offset’:[0,0],’points’:['cc','cc']}}” data-widget-type=”Popup” style=”display:none;width:950px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);opacity:0.5;”>

<span class=”prev J_TWidget” style=”cursor:pointer;float:left;display:block;width:59px;height:59px;background:url(http://img03.taobaocdn.com/imgextra/i3/60358248/T2zFRjXxxaXXXXXXXX-60358248.gif) no-repeat;”></span> <span style=”cursor:pointer;float:right;display:block;width:59px;height:59px;background:url(http://img03.taobaocdn.com/imgextra/i3/60358248/T2zFRjXxxaXXXXXXXX-60358248.gif) no-repeat right 0;”></span></div>

<div class=”scroller” style=”width:1920px;height:610px;overflow:hidden;”>

<ul class=”scroller-content”>

<li style=”width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;”>

<a href=”#” style=”display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img04.taobaocdn.com/imgextra/i4/475332642/T2jmxnXOxXXXXXXXXX_!!475332642.jpg) no-repeat center 0;” target=”_blank”></a></li>

<li style=”width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;”>

<a href=”#” style=”display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img04.taobaocdn.com/imgextra/i4/475332642/T2jmxnXOxXXXXXXXXX_!!475332642.jpg) no-repeat center 0;” target=”_blank”></a></li>

<li style=”width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;”>

<a href=”#” style=”display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img04.taobaocdn.com/imgextra/i4/475332642/T2jmxnXOxXXXXXXXXX_!!475332642.jpg) no-repeat center 0;” target=”_blank”></a></li>

</ul>

</div>

</div>

</div>

<ul class=”ks-switchable-nav” style=”display:none;”>

<li class=”ks-active”>

&nbsp;</li>

</ul>

</div>

本文固定链接: http://liuqingwei.cn/?p=760 | 小伟工作室

该日志由 于2014年04月02日发表在 技术分享, 网络文摘 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 网店全屏代码 | 小伟工作室